- Daily Sandbox
- Posts
- 🔥 Daily Digest: Boost Your Dev Workflow with Dropdown Tips, Git Search Hacks, and Shell Shortcuts
🔥 Daily Digest: Boost Your Dev Workflow with Dropdown Tips, Git Search Hacks, and Shell Shortcuts
PLUS: Explore AI-Ready Repos, Emoji Compatibility, and App Generation with Today’s Coding Toolbox
Daily Issue #67 | Subscribe to DS | Daily Sandbox Pro
🛩️ QUICK SUMMARY
This issue is packed with handy tips and AI-powered tools for boosting your development workflow. Here’s the scoop:
Dropdown Tips: Make dropdowns search-friendly and user-focused.
Shell History Navigation: Speed up command recall with CTRL key shortcuts.
Git Search Hack: Learn how to search for specific strings in Git commit changes.
Coding Toolbox:
Emoji-Fallback.js: Ensures emoji compatibility by replacing characters with Twemoji images.
repomix: Bundle your repo into a single, AI-ready file.
qapyq: Curate and edit AI datasets with an intuitive image viewer.
engy: Generate fully functional web apps with just natural language prompts.
🎆 NEWS, INNOVATIONS, TRENDS, TUTORIALS
How should <selectedoption> work?
Navigate your shell history with CTRL keys
How to search for strings in Git commit additions or deletions
Transform Your Excel Skills with 50 Pro Hacks (+ Free Templates)
Stop wrestling with spreadsheets. Our comprehensive Excel mastery pack includes everything you need to become a spreadsheet wizard in record time.
Master 50 essential Excel tricks with step-by-step GIF tutorials
Create stunning data visualizations using done-for-you graph templates
Learn time-saving shortcuts the pros use daily
Access game-changing formulas and functions explained simply
Ready to revolutionize your Excel workflow?
💻 TUTORIAL OF THE DAY
Mastering Automated Image Optimization in Production
In today’s web applications, the upload is just the start. Every image—whether a user avatar, product shot, or article cover—needs refinement before it’s ready for production. But optimizing images isn’t a one-size-fits-all task; you need a workflow that targets only new uploads, avoiding redundant re-processing. Let’s build an automated system that makes this seamless.
Step 1: Flagging Optimization Status with a Database Field
The backbone of our system is a simple flag in the database to track optimization status. By adding an is_optimized
boolean to your images
table, you can mark an image as optimized once processed. Here’s the SQL command:
ALTER TABLE images ADD COLUMN is_optimized BOOLEAN DEFAULT FALSE;
Step 2: Building the Optimization Workflow with Node.js
For efficiency, we’re using Node.js to handle database querying, image processing, and status updating. We’ll use sharp
for resizing, imagemin
for compression, and plugins like imagemin-mozjpeg
and imagemin-pngquant
for format-specific optimizations. The script checks each image, optimizes it, and then updates its is_optimized
status.
// Image Optimization Script
const optimizeImage = async (filePath, id) => {
const ext = path.extname(filePath).toLowerCase();
const resizedImage = await sharp(filePath).resize({ width: 1920, height: 1080 }).toBuffer();
const optimizedImage = ext === '.jpg' || ext === '.jpeg'
? await imagemin.buffer(resizedImage, { plugins: [imageminMozjpeg({ quality: 85 })] })
: await imagemin.buffer(resizedImage, { plugins: [imageminPngquant({ quality: [0.65, 0.8] })] });
fs.writeFileSync(filePath, optimizedImage);
await client.query(`UPDATE images SET is_optimized = true WHERE id = ${id}`);
};
This script resizes images within a 1920x1080
frame and applies compression to keep quality high while reducing file size.
Step 3: Scheduling with Bash and Cron
A Bash script, optimize_images.sh
, runs every 30 minutes to launch our Node.js script, which handles processing and updating the database.
*/30 * * * * /path/to/optimize_images.sh
With this setup, your images go from raw to production-ready automatically, with no redundancies. This workflow keeps your images optimized and your server lean.
⭐️ For the full details, check out the full article here.
🧰 CODING TOOLBOX
Emoji-Fallback.js - Replaces emoji characters with emoji images on devices that do not have emoji support with image emojis using Twemoji if needed
repomix - Repomix (formerly Repopack) is a powerful tool that packs your entire repository into a single, AI-friendly file
qapyq - An image viewer and AI-assisted editing tool that helps with curating datasets for generative AI models, finetunes and LoRA.
engy - an AI-powered development tool that generates fully functional web applications from natural language
#️⃣ DO YOU AI PROMPT?
Midjourney
I need an art for a developer website, focused on Web and Mobile programming, this art should include progamming languages icons and a notebook icon as well, as if all the icons belongs to the computer. Digital art, flat background, #082f49 should be the background color. Make the background as if it is made of a soft velvet.
📣 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
298+ News Articles
69+ AI Prompts
268+ 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