DEV Community: Rafa Rafael

The Frontend Fortress: Building a Bulletproof Code Quality Pipeline

Rafa Rafael — Tue, 06 Jan 2026 02:09:36 +0000

The frontend ecosystem is chaotic. Unlike the server-side where a crash is logged and the server restarts, a frontend crash leaves the user staring at a blank white screen.

You are likely already using Prettier for code style. But Prettier is just makeup; it doesn't stop your application from leaking memory or crashing due to undefined props.

To build a truly stable application—whether it is a modern React/Vue SPA or a legacy jQuery monolith—you need to enforce strict types, architectural boundaries, and performance rules automatically.

Here is how to set up a "Frontend Fortress" that catches bugs before they hit the browser.

1. Static Analysis: The First Line of Defense

The Problem: JavaScript is loosely typed. You pass a string where a number is expected, and the app runs fine until a specific user action crashes it.
The Solution: Strict TypeScript & ESLint.

TypeScript (Strict Mode)

TypeScript is your version of "Larastan." But it only works if you turn the safety features on.

Implementation:
Ensure your tsconfig.json has the strictest settings enabled. This forces you to handle null and undefined explicitly.

// tsconfig.json
{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "noUncheckedIndexedAccess": true // Vital: Prevents accessing array[10] without checking if it exists
  }
}

ESLint (The Logic Police)

ESLint catches bad patterns, like missing dependency arrays in Hooks or accidental global variables in legacy code.

Implementation:
Install strict plugins for your specific stack.

npm install eslint eslint-plugin-vue eslint-plugin-react-hooks eslint-plugin-jquery --save-dev

Configure .eslintrc.json (Multi-Stack Support):

{
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "plugin:vue/vue3-recommended",      // For Vue
    "plugin:react-hooks/recommended"    // For React
  ],
  "rules": {
    "no-var": "error", // For legacy: Kill "var", force const/let
    "eqeqeq": "error", // For legacy: Force === over ==
    "vue/multi-word-component-names": "off",
    "react/jsx-no-bind": "error",
    "no-console": ["warn", { "allow": ["warn", "error"] }]
  },
  "overrides": [
    {
      "files": ["**/*.js", "**/*.jquery.js"],
      "env": { "jquery": true } // Enable jQuery globals only for legacy files
    }
  ]
}

2. Enforce Architecture: Dependency Cruiser

The Problem: "Import Hell." A junior developer imports a heavy API service directly into a UI button, or creates circular dependencies that break the build.
The Solution: Dependency Cruiser.

This works for React, Vue, and Vanilla JS. It validates who is allowed to import whom.

Implementation:

npm install --save-dev dependency-cruiser

Create .dependency-cruiser.js. Here is a rule that enforces a clean flow: Components can use Logic/Stores, but Components cannot call the API directly.

module.exports = {
  forbidden: [
    {
      "name": "no-components-importing-api",
      "comment": "UI components must use Hooks/Composables. Do not call API directly.",
      "from": { "path": "^src/(components|views)" },
      "to": { "path": "^src/api" }
    },
    {
      "name": "no-legacy-mixing",
      "comment": "Modern Vue/React code should not import legacy jQuery scripts.",
      "from": { "path": "^src/(components|features)" },
      "to": { "path": "^src/legacy" }
    },
    {
      "name": "no-circular",
      "severity": "error",
      "from": {},
      "to": { "circular": true }
    }
  ]
};

3. Git Hooks: The Gatekeeper

The Problem: You configure these tools, but developers forget to run them.
The Solution: Husky + Lint Staged.

We run checks only on the files changed in the current commit.

Implementation:

Install:

npm install husky lint-staged --save-dev
npx husky init

Configure package.json:

"lint-staged": {
  "**/*.{ts,tsx,vue,js}": [
    "prettier --write",  // Format code
    "eslint --fix"       // Fix logic errors
  ],
  "**/*.{ts,tsx,vue}": [
    "bash -c 'tsc --noEmit'" // Strict type check (add vue-tsc for Vue)
  ]
}

Update .husky/pre-commit:
```
npx lint-staged
```

Now, if a developer tries to commit a broken Vue component or a legacy script with syntax errors, the commit is blocked.

4. The Brain: AI Instructions (The Most Important Part)

The Problem: AI assistants defaults to writing "Tutorial Code." It writes Mixins for Vue (deprecated), Class Components for React (outdated), or spaghetti jQuery for legacy.
The Solution: Custom Instructions.

Create a .github/copilot-instructions.md file. This forces Copilot to act like a Senior Architect for your specific stack.

Copy and paste these exact rules into that file:

# Senior Frontend Architect Instructions

You are a Senior Frontend Architect. You prioritize performance, type safety, and maintainability. Determine the technology stack of the current file (React, Vue, or Legacy JS) and apply the specific rules below.

## 🟢 REACT GUIDELINES

### 1. Separation of Concerns
* **No Logic in JSX:** Move complex logic, data fetching, or transformation into Custom Hooks.
* **Structure:** `Component` -> `Custom Hook` -> `API Layer`.

### 2. Performance
* **Derived State:** NEVER use `useEffect` to update state based on props. Use `useMemo` or calculate during render.
* **Referential Integrity:** Do not pass inline objects/functions to memoized components.

### 3. Anti-Patterns
* ❌ No `default export`. Use named exports.
* ❌ No prop drilling (> 2 levels). Use Composition or Context.
* ❌ No `any` type. Define strict interfaces.

---

## 🔵 VUE.JS GUIDELINES (Vue 3+)

### 1. Script Setup & Composition API
* **ALWAYS** use `<script setup lang="ts">`.
* **NEVER** use the Options API (`data`, `methods`, `computed` object syntax).
* **NEVER** use Mixins. Use Composables (`useFeature`) instead.

### 2. Reactivity
* Use `ref` for primitives and `reactive` for distinct objects.
* Destructure props using `const { propName } = toRefs(props)` if you need to retain reactivity in composables.

### 3. State Management
* Avoid "Prop Drilling." Use **Pinia** for global state.
* Avoid "Event Bubbling" up multiple layers. Use `defineEmits` strictly typed.

### 4. Style Guide
* **Multi-word names:** All component files must be multi-word (e.g., `UserCard.vue`, not `Card.vue`).
* **Directives:** Use shorthands (`@click` instead of `v-on:click`, `:src` instead of `v-bind:src`).

---

## 🟠 LEGACY JAVASCRIPT & JQUERY GUIDELINES

### 1. Global Namespace Protection
* **NEVER** declare variables in the global scope.
* Wrap all code in an **IIFE** (Immediately Invoked Function Expression) or use ES Modules if the build system permits.
    ```

javascript
    (function($) {
        // Code goes here
    })(jQuery);


    ```

### 2. DOM Performance (Cache your Selectors)
* **NEVER** query the DOM inside a loop or repeated event.
* **ALWAYS** cache selectors in variables prefixed with `$`.
    * ❌ Bad: `$('.btn').click(function() { $('.content').show(); })`
    * ✅ Good:
        ```

javascript
        const $btn = $('.btn');
        const $content = $('.content');
        $btn.on('click', () => $content.show());


        ```

### 3. Event Delegation
* **NEVER** bind events to elements that don't exist yet (dynamic content).
* **ALWAYS** use event delegation bound to a static parent.
    * ✅ `$(document).on('click', '.dynamic-button', function() { ... })`

### 4. Modernization
* Use `const` and `let`. **NEVER** use `var`.
* Use Template Literals (\`variable: ${x}\`) instead of string concatenation.
* Use `Array.forEach`, `map`, `filter` instead of `for` loops where possible.

---

## 📂 DIRECTORY STRUCTURE

### Feature-Based (React/Vue)
Group files by "feature" (business domain), not technical type.

src/
├── features/
│   ├── auth/
│   │   ├── components/  # LoginForm.vue / LoginForm.tsx
│   │   ├── hooks/       # useAuth.ts
│   │   ├── store/       # authStore.ts (Pinia/Zustand)
│   │   └── api/         # authApi.ts

### Legacy Structure
Separate scripts clearly.

src/
├── legacy/
│   ├── modules/         # Isolated functional modules
│   │   ├── cart.module.js
│   │   └── ui.module.js
│   └── main.js          # Entry point

## 🧪 TESTING STANDARDS (Vitest / RTL)

* **Prioritize User Behavior:** Test what the user sees, not internal state.
* **Selectors:** Use `getByRole` (accessibility) > `getByText`. Avoid `querySelector` in tests.
* **Mocking:** Mock network requests (MSW), not business logic functions.

Conclusion

By implementing this pipeline, you stop fighting fires and start building features.

TypeScript/ESLint prevents crashes across all frameworks.
Dependency Cruiser stops spaghetti code in both SPAs and Legacy apps.
Husky enforces the rules before commit.
Copilot is now trained to write modern React, clean Vue, and disciplined Legacy JS.

This is how you scale a frontend codebase without it collapsing under its own weight.

Enjoy!

The Invisible Wall: Building a Bulletproof Code Quality Pipeline in Laravel

Rafa Rafael — Mon, 05 Jan 2026 18:57:45 +0000

We have all been there. The feature works perfectly on your local machine. You push it, merge it, and deployment triggers. Ten minutes later, production crashes because of a Call to undefined method on a null object.

You are likely already using Laravel Pint for code style, which is great. However, Pint only checks how your code looks, not how it works. It is like spell-checking a book that has huge plot holes.

To build a truly stable application, especially for API stability, you need a "Swiss Cheese" model of defense. This involves multiple layers of static analysis, architectural enforcement, security scanning, and strict AI guidelines.

Here is how to set up a modern quality pipeline that catches bugs before they exist.

1. Static Analysis: Logic Checks Without Execution

The Problem: You rely on manual testing to find type errors.
The Solution: Tools that "read" your code and understand the flow of data without actually running the app.

Larastan (PHPStan for Laravel)

Larastan is the most impactful tool you can add. It understands Laravel's "magic" (facades, eloquence) and finds type errors, undefined variables, and incorrect method signatures.

Implementation:

composer require --dev larastan/larastan

Create a phpstan.neon file in your root. Start at Level 5. It is strict enough to be useful but forgiving enough for legacy codebases.

includes:
    - vendor/larastan/larastan/extension.neon

parameters:
    paths:
        - app/
    level: 5

Pro Tip: Do not try to fix 500 errors at once. Use a "baseline" file. This tells Larastan to ignore existing errors but report any new errors created from today onwards.

Rector

While Larastan finds bugs, Rector fixes bad habits. It instantly upgrades your code to newer PHP versions and Laravel best practices.

Implementation:

composer require --dev rector/rector

Run npx rector init. It can automatically turn old array syntax array() into [] or replace manual property assignments with PHP 8.2 readonly classes.

2. Enforce Architecture with Tests

The Problem: Spaghetti code. A junior dev puts complex tax calculation logic inside a Controller instead of a Service class.
The Solution: Pest Architecture Tests.

If your project follows a Service-Repository pattern, you should not just hope people follow it. You should enforce it. Pest allows you to write tests for your file structure.

Implementation:

First, ensure you are using Pest, then create tests/ArchTest.php:

<?php

test('controllers should not access models directly')
    ->expect('App\Http\Controllers')
    ->not->toUse('App\Models') // Force use of Services/Repositories
    ->ignoring('App\Http\Controllers\Auth');

test('controllers should not use inline validation')
    ->expect('App\Http\Controllers')
    ->not->toUse('Illuminate\Support\Facades\Validator');

test('globals are strictly prohibited')
    ->expect(['dd', 'dump', 'env'])
    ->not->toBeUsed();

Why this matters: This prevents "architecture drift." If someone tries to shortcut the Repository pattern, the build fails immediately.

3. Git Hooks: The First Line of Defense

The Problem: CI/CD takes 10 minutes to run. If you forgot a semicolon, you waste 10 minutes waiting for the build to fail.
The Solution: Husky + Lint Staged.

We want to run checks only on the files you just changed, right before you commit.

Implementation:

Since Laravel projects usually have a package.json for frontend assets, we can use Node tools to manage git hooks.

Install Husky and Lint Staged:

npm install husky lint-staged --save-dev
npx husky init

Configure package.json:

Add a configuration that tells the system to run Pint and Larastan on PHP files when they are staged for commit.

"lint-staged": {
    "**/*.php": [
        "./vendor/bin/pint",
        "./vendor/bin/phpstan analyse --memory-limit=2G"
    ]
}

Update the pre-commit hook:

In .husky/pre-commit, add:
```
npx lint-staged
```

Now, if you try to commit messy code, the commit is blocked. You fix it, and try again.

4. Security & Maintenance

The Problem: Your code is clean, but you are using a library with a known hack, or your server config is insecure.
The Solution: Enlightn & Composer Audit.

Enlightn

Enlightn is like a consultant in a box. It checks 120+ items covering performance, security, and reliability. For example, it checks if you are using env() outside of config files.

composer require --dev enlightn/enlightn
php artisan enlightn

Composer Audit

This is built into Composer. It checks your composer.lock against a database of known security vulnerabilities.

Add this to your CI pipeline:

- name: Check for security vulnerabilities
  run: composer audit

5. The Brain: Strict AI Instructions

The Problem: AI assistants often write "Junior" level code, using anti-patterns like inline validation or direct model queries.
The Solution: Custom Instructions.

To fix this, create a .github/copilot-instructions.md file in your repository. This forces the AI to adopt the persona of a Senior Architect and follow strict rules.

Copy and paste these exact rules into that file:

Laravel Copilot Instructions

You are a Senior Laravel Architect. You prioritize clean architecture, SOLID principles, and maintainability. You strictly adhere to the Service-Repository pattern and "Fat Model, Skinny Controller" philosophy.

## 🚫 STRICT PROHIBITIONS (Anti-Patterns)

### 1. No Inline Class Paths (FQCN)
**NEVER** use Fully Qualified Class Names inline within code blocks. Always import classes at the top of the file with `use`.
* ❌ **Bad:** `public function index(\Illuminate\Http\Request $request)`
* ✅ **Good:**
  php
  use Illuminate\Http\Request;
  // ...
  public function index(Request $request)


### 2. No Direct Model Queries in Controllers
**NEVER** write Eloquent queries directly inside a Controller.
* ❌ **Bad:** `$users = User::where('active', 1)->get();`
* ✅ **Good:** `$users = $this->userService->getActiveUsers();` or `$users = $this->userRepository->getAllActive();`

### 3. No Inline Validation
**NEVER** use `$request->validate([...])` inside a Controller method.
* ❌ **Bad:** `$request->validate(['email' => 'required']);`
* ✅ **Good:** Create and type-hint a Form Request: `public function store(StoreUserRequest $request)`

### 4. No Raw JSON Responses
**NEVER** return raw Models, Arrays, or `response()->json()` for API data.
* ❌ **Bad:** `return response()->json($user);`
* ✅ **Good:** Always use API Resources: `return new UserResource($user);`

### 5. No Private Controller Methods (Business Logic)
**AVOID** creating private helper methods inside Controllers to handle business logic. If a Controller method is getting too complex, the logic belongs in a Service, Action, or Job.
* ❌ **Bad:** `private function calculateTax($order) { ... }` inside a Controller.
* ✅ **Good:** `$this->taxCalculator->calculate($order);` (Logic moved to a dedicated class).

### 6. No Logic in Blade/Views
**NEVER** place queries or complex PHP logic in Blade files.
* ❌ **Bad:** `@foreach(User::all() as $user)`
* ✅ **Good:** Pass data from the Controller or ViewComposer.

---

## 🏗️ ARCHITECTURE & CODING STANDARDS

### Service-Repository Pattern
* Controllers must **only** handle:
    1.  Receiving the Request (via FormRequest).
    2.  Delegating to a Service/Repository.
    3.  Returning a Resource/Response.
* All business logic lives in **Services**.
* All database logic lives in **Repositories** (or Scopes if lightweight).

### Type Safety & Modern PHP
* **Always** use strict types: `declare(strict_types=1);` at the top of every file.
* **Always** add return types to methods: `public function index(): AnonymousResourceCollection`.
* **Always** type-hint arguments.

### Code Quality Checklist
Before suggesting code, verify:
1.  [ ] Are all classes imported with `use`? (No inline FQCN)
2.  [ ] Does this belong in a Service?
3.  [ ] Is validation handled in a FormRequest?
4.  [ ] Is the response wrapped in a Resource?
5.  [ ] Are magic strings/numbers replaced with Constants or Enums?

Conclusion

By implementing this pipeline, you shift from "hoping" code is good to guaranteeing it is.

Copilot writes better code because of your instructions.
Pint fixes the style.
Larastan catches logic errors.
Husky blocks bad commits.
Pest enforces the architecture.

This is how you scale a codebase without scaling the technical debt.

Enjoy!

🛡️ Introducing CodeSnoutr — AI-Powered Code Scanner for Laravel Developers

Rafa Rafael — Wed, 08 Oct 2025 18:52:21 +0000

As Laravel developers, we often focus on delivering features fast — but keeping your code secure, clean, and efficient can become a real challenge over time.

That’s exactly why I built CodeSnoutr — a Laravel package that automatically scans your codebase for security risks, performance bottlenecks, and code quality issues, all presented beautifully through a modern dashboard. And yes, it even includes AI-powered auto-fixes. 🤖

Available on Packagist: rafaelogic/codesnoutr

🚀 What Is CodeSnoutr?

CodeSnoutr is your Laravel project’s personal code guardian. It helps you spot potential issues in your codebase before they cause real problems in production.

It scans your application to find:

🛡️ Security vulnerabilities — like SQL injection, XSS, or hardcoded secrets
⚡ Performance bottlenecks — such as N+1 queries or inefficient loops
🧩 Code quality issues — including unused code, poor naming, or high complexity
🎨 Laravel best practice violations — in Blade templates, Eloquent relationships, and controllers

Everything is presented inside a beautiful Livewire + Tailwind dashboard where you can filter, explore, and manage your scan results in seconds.

🧠 How It Works

CodeSnoutr runs directly in your Laravel app — no external API calls required.

Once installed, you can trigger scans using simple Artisan commands:

composer require rafaelogic/codesnoutr
php artisan codesnoutr:install
php artisan codesnoutr:scan

The scanner then analyzes your codebase for risky patterns, complex functions, or Laravel-specific misconfigurations. Once it’s done, you’ll get a detailed report in your local dashboard — complete with issue categories, severity levels, and actionable suggestions.

And here’s the best part:

You can connect your OpenAI API key to automatically fix issues or get AI-suggested refactors directly in the dashboard.

CodeSnoutr doesn’t just point out problems — it helps you solve them.

🧩 Key Features (Based on the Latest Changelog)

✅ 1. Laravel Code Scanning Engine

Detects vulnerabilities, inefficiencies, and code quality problems across your entire codebase.

💻 2. Modern Web Dashboard

Built with Livewire and Tailwind CSS, the dashboard provides a clean, interactive interface for exploring and filtering scan results.

⚙️ 3. Artisan Commands

Quick setup and usage with:

php artisan codesnoutr:install
php artisan codesnoutr:scan

You can scan your full project, or target specific directories or files.

🤖 4. AI-Powered Auto-Fix

Optionally connect OpenAI to automatically fix issues or suggest refactors.

No more manually rewriting repetitive patterns — AI handles it for you.

🧱 5. Laravel-Native Integration

Works seamlessly with Laravel 10, 11, and 12 on PHP 8.1+, following Laravel’s conventions for installation, configuration, and artisan usage.

🧭 Why You’ll Love Using CodeSnoutr

Find hidden security issues before they cause damage
Identify performance bottlenecks early
Simplify refactors and reviews
Get smarter, AI-driven suggestions
Keep your Laravel projects maintainable and future-proof

In short — it’s like having an extra team member who reviews your code 24/7.

💡 Example Use Case

Let’s say you’re working on a large Laravel application with multiple developers.

Over time, the codebase starts to grow messy — some queries are inefficient, some methods too complex, and a few Blade templates have outdated logic.

By installing CodeSnoutr, you can quickly scan your app and surface:

Functions with unnecessary loops
Models with unoptimized relationships
Controllers with potential security risks
Files with unused or legacy code

You review them visually in the dashboard, fix what’s needed — or let AI do it for you. It’s that simple.

🧰 Getting Started in Seconds

composer require rafaelogic/codesnoutr
php artisan codesnoutr:install
php artisan codesnoutr:scan

Then visit the dashboard URL printed in your terminal — and start exploring your first scan.

(Optional) Connect OpenAI in your .env file for AI auto-fix:

OPENAI_API_KEY=your_api_key_here

💻 Contribute & Collaborate

CodeSnoutr is open source and constantly evolving.

You can help make it even better by contributing to:

New rule definitions
UI improvements
Documentation and examples
Bug reports or performance optimizations

Join us on GitHub 👇

🔗 github.com/rafaelogic/codesnoutr

🧩 Final Thoughts

CodeSnoutr is built to help Laravel developers write better, safer, and more efficient code — without slowing you down.

It’s still early in its journey, but the goal is clear:

To become a trusted code companion that makes every Laravel project cleaner and more reliable.

Try it out today, share your feedback, and let’s make Laravel development smarter — together. 💪

🎬 How to Convert and Compress MOV to MP4 Using FFmpeg on macOS (Without Losing Quality)

Rafa Rafael — Thu, 22 May 2025 18:00:35 +0000

As developers, we often deal with images, scripts, and occasionally... Videos. While images are usually optimized, videos can quickly become a storage and bandwidth nightmare if not properly compressed.

🧩 A Real-World Developer Scenario

Imagine you're building a portfolio site for a client who owns a video production company. They’ve handed you several .mov files. Crisp, high-definition showcase reels of their work to embed on their homepage and project pages.

You upload the first video to your server and immediately hit a roadblock: the file size is over 1GB for a 2-minute clip. Not only does this eat up server storage, but loading that video on the front page seriously slows down performance. Especially on mobile devices. And you haven’t even started on the other videos.

That’s where video compression comes in.

🚀 Why Compress Videos?

Here are some compelling reasons to compress .mov videos into smaller .mp4 files:

✅ 1. Faster Load Times

Smaller videos load faster and reduce page weight, improving the user experience.

✅ 2. Lower Hosting Costs

Fewer megabytes mean less disk space and bandwidth usage on your hosting plan.

✅ 3. Improved SEO

Page speed is a ranking factor for Google. Lightweight videos help you climb search results.

✅ 4. Better Compatibility

modern browsers and devices universally support .mp4 files using H.264, .mov is not.

✅ 5. Retain Quality

With the right tools, you can compress videos without noticeable loss of quality.

🛠️ Enter `ffmpeg`: Your Compression Power Tool

ffmpeg is a free and powerful command-line tool for video/audio conversion and compression. On macOS, it works perfectly with Homebrew.

🧑‍💻 Step-by-Step: Convert and Compress `.mov` to `.mp4`

1. Install `ffmpeg` on macOS

brew install ffmpeg

2. Basic Conversion & Compression Command

ffmpeg -i input.mov -vcodec libx264 -crf 28 -preset medium -acodec aac -b:a 128k output.mp4

What This Does:

input.mov: Your original video
-vcodec libx264: Converts video to H.264 codec
-crf 28: Controls quality (lower = better, 23 is default, 28 is a good balance)
-preset medium: Speed vs file size (use slow for smaller output)
-acodec aac -b:a 128k: Compresses audio while keeping it clear
output.mp4: Your new, smaller video

🪄 Want to Shrink Resolution Too?

If your video is 4K but you only need 720p, add this:

-vf "scale=1280:-2"

Example:

ffmpeg -i input.mov -vf "scale=1280:-2" -vcodec libx264 -crf 28 -preset medium -acodec aac -b:a 128k output.mp4

This scales the width to 1280px and automatically adjusts the height to preserve the aspect ratio.

🧾 Bonus: Batch Convert All `.mov` Files in a Folder

If you have a lot of videos to convert, you can automate the process with a simple shell script:

📜 Shell Script: `convert-all-mov.sh`

#!/bin/bash

# Directory containing your .mov files
INPUT_DIR="./videos"
OUTPUT_DIR="./compressed"

# Create output directory if it doesn't exist
mkdir -p "$OUTPUT_DIR"

# Loop through all .mov files in the input directory
for file in "$INPUT_DIR"/*.mov; do
  # Get filename without extension
  filename=$(basename "$file" .mov)

  echo "Converting $filename.mov to $filename.mp4..."

  ffmpeg -i "$file" \\
    -vcodec libx264 -crf 28 -preset medium \\
    -acodec aac -b:a 128k \\
    "$OUTPUT_DIR/$filename.mp4"

  echo "✅ Done: $filename.mp4"
done

echo "🎉 All videos have been converted and saved to $OUTPUT_DIR"

📦 How to Use It

Save the script as convert-all-mov.sh
Create a folder named videos and put your .mov files inside
Make the script executable:

chmod +x convert-all-mov.sh

Run it:

./convert-all-mov.sh

📁 Folder Structure Example

project/
├── videos/          # contains your .mov files
├── compressed/      # will contain the .mp4 output files
└── convert-all-mov.sh

🧠 Final Thoughts

Compressing videos is not just about saving space. It’s about delivering a faster, smoother experience for your users. As developers, we should care about performance just as much as design and functionality.

With ffmpeg, you can quickly convert .mov files to .mp4, slash the file size, and still keep the quality sharp. Whether you're uploading to a blog, portfolio, SaaS app, or e-commerce store, this simple workflow is a game-changer.

Essential Layout Considerations for Web Pages Using Tailwind CSS

Rafa Rafael — Thu, 31 Oct 2024 20:20:00 +0000

When laying out your web pages, many factors affect the design, usability, and maintenance of your project. Here, we’ll cover some essential layout considerations with examples using Tailwind CSS to help you design responsive, clean, and functional websites.

1. Avoiding Multiple Scrollbars

A common layout issue is the unintended creation of multiple scrollbars, especially when using CSS overflow properties. Multiple scrollbars occur when nested elements have overflow: scroll, causing an undesirable UX.

Solution Example

To prevent multiple scrollbars, set the main container’s overflow and avoid nesting containers with overflow: scroll too deeply.

<div class="overflow-auto h-screen">
  <div class="max-h-full overflow-y-auto">
    <!-- Your content here -->
  </div>
</div>

In this example, we use overflow-auto on the outermost container and restrict overflow properties on nested elements. This approach limits nested scrollable areas, preventing multiple scrollbars.

2. Prevent Layout Breakage When Section Dimensions Change

Dynamic content can affect layout when sections change height or width, causing breaking issues. Using a flexible layout with relative units and constraints can help avoid these issues.

Solution Example

Using Tailwind’s responsive utilities and flexible layouts, you can make a layout that gracefully adjusts as content grows or shrinks.

<div class="flex flex-wrap">
  <div class="flex-1 p-4 bg-gray-200 min-w-[200px] max-w-[600px]">
    <!-- Variable content here -->
  </div>
  <div class="flex-1 p-4 bg-gray-300 min-w-[200px] max-w-[600px]">
    <!-- Variable content here -->
  </div>
</div>

By using min-w and max-w, we ensure the layout doesn’t break even if the content changes in width.

3. Adding Sticky Sections Easily

Sticky sections (like headers or sidebars) often encounter issues when they need to remain fixed within a scrollable container. This can be difficult if the scroll context isn’t well-defined.

Solution Example

To add a sticky section with Tailwind CSS, use sticky along with a defined top value. However, make sure the parent container is large enough to allow scrolling.

<div class="h-screen overflow-auto">
  <div class="sticky top-0 bg-blue-500 p-4">
    <!-- Sticky header or sidebar content -->
  </div>
  <div class="p-4">
    <!-- Scrollable content here -->
  </div>
</div>

This layout ensures that the sticky section remains fixed at the top, while the rest of the content scrolls.

4. Preventing Overlapping Layouts

Overlapping layouts can occur when elements have negative margins or when positioning is improperly used. Overlaps can make content hard to read and break responsive designs.

Solution Example

Using Tailwind’s padding and margin utilities, you can maintain spacing without unintended overlaps.

<div class="relative p-4 bg-gray-100">
  <div class="absolute inset-x-0 top-0 bg-gray-500 p-4">
    <!-- Content that needs to stay on top -->
  </div>
  <div class="mt-16 p-4">
    <!-- Main content here -->
  </div>
</div>

Here, the mt-16 ensures the main content avoids overlapping the positioned header.

5. Ensuring Responsive Design

Responsive design is crucial for a seamless user experience across devices. Tailwind’s responsive utilities make it easy to adjust layouts based on screen sizes.

Solution Example

Using Tailwind’s responsive breakpoints (sm, md, lg, xl), you can design responsive layouts effortlessly.

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
  <div class="bg-blue-500 p-4">Item 1</div>
  <div class="bg-blue-500 p-4">Item 2</div>
  <div class="bg-blue-500 p-4">Item 3</div>
  <div class="bg-blue-500 p-4">Item 4</div>
</div>

In this example, the layout will automatically adjust the number of columns based on screen size.

6. Avoiding Fixed Heights for Dynamic Content

Setting a fixed height can cause content overflow issues, especially if content is dynamic. Instead, opt for min-h or let the container grow with h-auto.

Solution Example

This approach keeps your layout flexible, preventing content from overflowing in unexpected ways.

<div class="min-h-[300px] h-auto p-4 bg-gray-200">
  <!-- Content that may grow -->
</div>

Using min-h allows for minimum height constraints, while h-auto enables flexible height.

7. Managing White Space and Alignment

Proper alignment and white space improve readability. Tailwind’s space-x and space-y utilities simplify spacing between items, avoiding manual margins.

Solution Example

Use space-x-4 or space-y-4 to control spacing between child elements without extra markup.

<div class="flex space-x-4">
  <div class="p-4 bg-red-300">Box 1</div>
  <div class="p-4 bg-red-300">Box 2</div>
  <div class="p-4 bg-red-300">Box 3</div>
</div>

This approach adds consistent space between elements without needing individual margins on each child.

8. Optimizing for Accessibility

Accessibility is essential, ensuring all users can navigate and understand content. Use high-contrast colors, focus states, and ARIA labels as needed.

Solution Example

You can use Tailwind’s focus: utilities for interactive elements to improve accessibility.

<button class="bg-blue-500 text-white p-4 focus:outline-none focus:ring-2 focus:ring-blue-300">
  Accessible Button
</button>

This example provides a clear focus state for keyboard navigation, enhancing usability for all users.

9. Avoiding Over-reliance on Absolute Positioning

Absolute positioning can be useful but may lead to layout issues on different screen sizes. Whenever possible, use Flexbox or Grid for positioning.

Solution Example

Here’s how you can align elements without using absolute.

<div class="flex items-center justify-center h-screen">
  <div class="p-4 bg-green-500">
    Centered Box
  </div>
</div>

Using flex with items-center and justify-center centers content without the pitfalls of absolute positioning.

Conclusion

Each of these considerations helps build a layout that is responsive, accessible, and easy to maintain. Tailwind CSS utility classes are invaluable for crafting layouts without writing extensive CSS, keeping your workflow efficient and your code clean. By keeping these best practices in mind, you can avoid common layout pitfalls and create better user experiences.

Load Images Faster in Laravel and JavaScript

Rafa Rafael — Tue, 03 Sep 2024 19:39:00 +0000

In the world of web development, the speed at which images load on your website can make or break the user experience. Slow-loading images can lead to higher bounce rates, lower engagement, and ultimately, a negative impact on SEO. If you’re using Laravel and JavaScript, there are several strategies you can implement to optimize image loading and ensure your web application performs at its best. In this blog post, we’ll explore various techniques to load images faster using Laravel and JavaScript.

1. Optimize Image Files Before Uploading

Before diving into code-level optimizations, it’s essential to start with the images themselves. Large image files are one of the most common reasons for slow page loads. Here are some tips for optimizing images before uploading them:

Compress Images: Use tools like TinyPNG, JPEG-Optimizer, or ImageOptim to compress your images without losing quality.
Choose the Right Format: Use JPEG for photographs and PNG for images with transparency. SVG is great for icons and simple graphics.
Resize Images: Ensure that images are not larger than they need to be. Serving a 2000px wide image when only 500px is needed wastes bandwidth.

2. Use Laravel’s Image Caching and Manipulation

Laravel comes with powerful tools that can help you manage and optimize images efficiently. The Intervention Image package is particularly useful for this purpose.

Image Caching: You can cache images on the server-side to reduce the load time for subsequent requests. This is particularly useful for images that are generated or resized on the fly.

use Intervention\Image\Facades\Image;
use Illuminate\Support\Facades\Cache;

public function show($id)
{
    $image = Cache::remember("image_$id", 60, function() use ($id) {
        return Image::make(storage_path("app/public/images/$id.jpg"))->resize(800, 600)->encode('jpg');
    });

    return response($image)->header('Content-Type', 'image/jpeg');
}

On-the-Fly Image Manipulation: With Intervention Image, you can resize, crop, and apply filters to images dynamically, reducing the need to store multiple versions of the same image.

$image = Image::make('public/foo.jpg')->resize(300, 200);
return $image->response('jpg');

3. Leverage Lazy Loading in JavaScript

Lazy loading defers the loading of images until they are about to enter the viewport, which can drastically reduce the initial load time of a page.

Native Lazy Loading: HTML5 now supports lazy loading natively with the loading attribute.

<img src="image.jpg" loading="lazy" alt="Lazy Loaded Image">

JavaScript Libraries: If you need more control, consider using a JavaScript library like lazysizes.

document.addEventListener("DOMContentLoaded", function() {
    let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
    let active = false;

    const lazyLoad = function() {
        if (active === false) {
            active = true;

            setTimeout(function() {
                lazyImages.forEach(function(lazyImage) {
                    if ((lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImage).display !== "none") {
                        lazyImage.src = lazyImage.dataset.src;
                        lazyImage.classList.remove("lazy");

                        lazyImages = lazyImages.filter(function(image) {
                            return image !== lazyImage;
                        });

                        if (lazyImages.length === 0) {
                            document.removeEventListener("scroll", lazyLoad);
                            window.removeEventListener("resize", lazyLoad);
                            window.removeEventListener("orientationchange", lazyLoad);
                        }
                    }
                });

                active = false;
            }, 200);
        }
    };

    document.addEventListener("scroll", lazyLoad);
    window.addEventListener("resize", lazyLoad);
    window.addEventListener("orientationchange", lazyLoad);
});

4. Use Content Delivery Networks (CDNs)

CDNs distribute your images across multiple servers globally, so users can download them from a server closest to their location. This reduces latency and speeds up image loading.

CDN Integration in Laravel: Laravel makes it easy to integrate with CDNs. You can store your images in cloud storage like AWS S3 or DigitalOcean Spaces and serve them through a CDN.

Storage::disk('s3')->put('path/to/image.jpg', $imageContent);

$cdnUrl = Storage::disk('s3')->url('path/to/image.jpg');

5. Implement WebP Images

WebP is a modern image format that provides superior lossless and lossy compression for images on the web. By serving images in WebP format, you can significantly reduce the file size without sacrificing quality.

Automatic WebP Conversion: Tools like spatie/laravel-image-optimizer can automatically convert images to WebP during the upload process.

use Spatie\Image\Image;
use Spatie\Image\Manipulations;

Image::load('image.jpg')
    ->format(Manipulations::FORMAT_WEBP)
    ->save('image.webp');

Fallback for Unsupported Browsers: Not all browsers support WebP. Use a JavaScript fallback or server-side logic to serve JPEG/PNG versions to browsers that don’t support WebP.

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Fallback Image">
</picture>

6. Defer Offscreen Images in JavaScript

By deferring offscreen images, you ensure that only images that are immediately visible are loaded first, while the others are loaded later.

document.addEventListener('DOMContentLoaded', function() {
    let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

    function isInViewport(el) {
        const rect = el.getBoundingClientRect();
        return (
            rect.top >= 0 &&
            rect.left >= 0 &&
            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
    }

    function deferImageLoading() {
        lazyImages.forEach(image => {
            if (isInViewport(image)) {
                image.src = image.dataset.src;
                image.classList.remove('lazy');
            }
        });
    }

    window.addEventListener('scroll', deferImageLoading);
    window.addEventListener('resize', deferImageLoading);
    window.addEventListener('load', deferImageLoading);
});

Optimizing image loading in your Laravel and JavaScript projects is crucial for delivering a fast and responsive user experience. By compressing images, leveraging lazy loading, using CDNs, implementing WebP formats, and optimizing your CSS and JS files, you can significantly improve the load times of images on your website. Remember, the goal is to balance image quality with performance to create a seamless experience for your users.

Start implementing these strategies today and see the difference in your website’s performance!

Enjoy!

Implementing Infinite Scroll with Laravel and Vue.js 3

Rafa Rafael — Thu, 22 Aug 2024 22:19:00 +0000

Infinite scroll is a more modern alternative to traditional pagination, providing a seamless user experience. In this blog post, we’ll implement infinite scroll in a Vue.js 3 application using Laravel as the backend.

Prerequisites

Basic knowledge of Laravel and Vue.js 3.
A Laravel project with an API to paginate data (e.g., User model).

Section 1: Setting Up the Basic Vue.js 3 Component for Infinite Scroll

Step 1: Create the Backend API

Create a simple API in your Laravel application to return paginated data:

routes/api.php

use App\Models\User;
use Illuminate\Http\Request;

Route::get('/users', function (Request $request) {
    return User::paginate(10);
});

Step 2: Create the UserList Component with Infinite Scroll

Modify the UserList component to implement infinite scroll:

src/components/UserList.vue

<template>
  <div>
    <table class="table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.name }}</td>
          <td>{{ user.email }}</td>
        </tr>
      </tbody>
    </table>
    <div v-if="loading" class="loading">
      Loading more users...
    </div>
  </div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import axios from 'axios';

export default {
  setup() {
    const users = ref([]);
    const loading = ref(false);
    let page = ref(1);
    let observer;

    const fetchUsers = async () => {
      loading.value = true;
      try {
        const response = await axios.get(`/api/users?page=${page.value}`);
        if (response.data.data.length > 0) {
          users.value.push(...response.data.data);
          page.value++;
        }
      } catch (error) {
        console.error(error);
      } finally {
        loading.value = false;
      }
    };

    const handleScroll = () => {
      const scrollableHeight = document.documentElement.scrollHeight - window.innerHeight;
      const scrolledFromTop = window.scrollY;

      if (scrollableHeight - scrolledFromTop < 100 && !loading.value) {
        fetchUsers();
      }
    };

    onMounted(() => {
      fetchUsers();
      window.addEventListener('scroll', handleScroll);
    });

    onBeforeUnmount(() => {
      window.removeEventListener('scroll', handleScroll);
    });

    return {
      users,
      loading,
    };
  },
};
</script>

<style>
.loading {
  text-align: center;
  margin-top: 10px;
}
</style>

Step 3: Integrate the Component in Your Vue App

Include the component in your Vue app:

src/main.js

import { createApp } from 'vue';
import App from './App.vue';
import UserList from './components/UserList.vue';

const app = createApp(App);

app.component('user-list', UserList);

app.mount('#app');

src/App.vue

<template>
  <div id="app">
    <user-list></user-list>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

Section 2: Managing Infinite Scroll with Vuex

If you need to manage the state of infinite scroll across different components, Vuex can help.

Step 1: Set Up Vuex Store

Create a store to manage the users and infinite scroll state:

src/store/index.js

import { createStore } from 'vuex';
import axios from 'axios';

export default createStore({
  state: {
    users: [],
    loading: false,
    page: 1,
  },
  mutations: {
    ADD_USERS(state, users) {
      state.users.push(...users);
    },
    SET_LOADING(state, loading) {
      state.loading = loading;
    },
    INCREMENT_PAGE(state) {
      state.page++;
    },
  },
  actions: {
    async fetchUsers({ commit, state }) {
      if (state.loading) return;

      commit('SET_LOADING', true);
      try {
        const response = await axios.get(`/api/users?page=${state.page}`);
        if (response.data.data.length > 0) {
          commit('ADD_USERS', response.data.data);
          commit('INCREMENT_PAGE');
        }
      } catch (error) {
        console.error(error);
      } finally {
        commit('SET_LOADING', false);
      }
    },
  },
  getters: {
    users(state) {
      return state.users;
    },
    loading(state) {
      return state.loading;
    },
  },
});

Step 2: Update the UserList Component

Modify the UserList component to use Vuex for managing the infinite scroll state:

src/components/UserList.vue

<template>
  <div>
    <table class="table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.name }}</td>
          <td>{{ user.email }}</td>
        </tr>
      </tbody>
    </table>
    <div v-if="loading" class="loading">
      Loading more users...
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';
import { onMounted, onBeforeUnmount } from 'vue';

export default {
  computed: {
    ...mapGetters(['users', 'loading']),
  },
  methods: {
    ...mapActions(['fetchUsers']),
    handleScroll() {
      const scrollableHeight = document.documentElement.scrollHeight - window.innerHeight;
      const scrolledFromTop = window.scrollY;

      if (scrollableHeight - scrolledFromTop < 100 && !this.loading) {
        this.fetchUsers();
      }
    },
  },
  created() {
    this.fetchUsers();
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  },
};
</script>

<style>
.loading {
  text-align: center;
  margin-top: 10px;
}
</style>

Step 3: Integrate Vuex into Your Vue App

Ensure that Vuex is integrated into your Vue.js application:

src/main.js

import { createApp } from 'vue';
import App from './App.vue';
import store from './store'; // Import the Vuex store
import UserList from './components/UserList.vue';

const app = createApp(App);

app.use(store); // Use Vuex store in the app
app.component('user-list', UserList);

app.mount('#app');

Step 4: Modify App.vue

Your main App.vue should include the UserList component:

<!-- src/App.vue -->
<template>
  <div id="app">
    <user-list></user-list>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

By following these steps, you’ve successfully implemented infinite scroll in a Vue.js 3 application, using Laravel as the backend. Whether you’re handling state locally within a component or globally with Vuex, infinite scroll provides a smooth, modern user experience. The Vuex integration is particularly useful when managing the scroll state across multiple components or views, ensuring that your application remains scalable and maintainable.

This approach not only enhances user experience by loading data dynamically as the user scrolls but also optimizes performance by loading only necessary data at a time.

Enjoy!

Implementing Infinite Scroll with Laravel and jQuery

Rafa Rafael — Thu, 22 Aug 2024 17:10:00 +0000

Infinite scroll provides a more modern and fluid way of loading data compared to traditional pagination. Instead of clicking on pagination links, new data is automatically loaded as the user scrolls down the page.

Prerequisites

Basic knowledge of Laravel and jQuery.
A Laravel project with a model to paginate (e.g., User).

Step 1: Setting Up Laravel for Pagination

First, set up your controller to handle pagination:

// In your UserController
public function index(Request $request)
{
    $users = User::paginate(10); // Paginate the results, 10 per page

    if ($request->ajax()) {
        return view('users.partials.users_list', compact('users'))->render();
    }

    return view('users.index', compact('users'));
}

Step 2: Create the View

Create views to display the paginated data:

resources/views/users/index.blade.php

@extends('layouts.app')

@section('content')
<div id="user-list">
    @include('users.partials.users_list', ['users' => $users])
</div>
<div id="loading" style="text-align:center; display:none;">
    <p>Loading more users...</p>
</div>
@endsection

resources/views/users/partials/users_list.blade.php

@foreach($users as $user)
<tr>
    <td>{{ $user->name }}</td>
    <td>{{ $user->email }}</td>
</tr>
@endforeach

Step 3: Implementing jQuery for Infinite Scroll

Now, modify your jQuery script to support infinite scroll:
public/js/infinite-scroll.js

$(document).ready(function() {
    let page = 1;

    $(window).scroll(function() {
        if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
            page++;
            loadMoreData(page);
        }
    });

    function loadMoreData(page) {
        $.ajax({
            url: '?page=' + page,
            method: 'GET',
            beforeSend: function() {
                $('#loading').show();
            },
            success: function(data) {
                if (data.trim() === "") {
                    return;
                }
                $('#loading').hide();
                $('#user-list').append(data);
            },
            error: function(xhr) {
                console.log(xhr.responseText);
            }
        });
    }
});

Include this script in your main view:

@section('scripts')
<script src="{{ asset('js/infinite-scroll.js') }}"></script>
@endsection`

By implementing infinite scroll with Laravel and jQuery, you can provide a smoother user experience. This approach eliminates the need for pagination links and automatically loads content as the user scrolls.

Enjoy!

How AI Boosted My Productivity and Quality of Work as a Software Developer

Rafa Rafael — Sat, 17 Aug 2024 15:36:11 +0000

As a software developer, my pursuit of efficiency, code quality, and problem-solving prowess has always been a priority. Recently, integrating AI into my workflow has been a game-changer, significantly boosting both my productivity and the quality of my work. Here’s a deeper dive into my experience with AI, highlighting how it has transformed my daily tasks, a few challenges, and how I’ve navigated them.

Refactoring Code with Precision

Refactoring code is a cornerstone of good software development and has historically been a meticulous process. Before AI, this often meant painstakingly reviewing and revising code to ensure it was efficient, readable, and maintainable. Now, with AI, this process has become more intuitive and less time-consuming.

When faced with a piece of code that needs improvement, I can describe the problem to the AI, and it provides suggestions for refactoring. These suggestions are not only practical but also align with best practices that I might overlook. For instance, AI has introduced me to new design patterns and optimization techniques, enhancing my coding skills and allowing me to deliver cleaner, more efficient code.

Overcoming Blockers Through Brainstorming

Every developer encounters roadblocks—those moments when a problem seems insurmountable. Traditionally, overcoming these blockers meant digging through forums, and documentation, or seeking advice from colleagues. With AI, however, brainstorming solutions have become more streamlined and effective.

By explaining the problem to the AI, I can explore various approaches and get fresh perspectives. The AI acts like a virtual brainstorming partner, offering potential solutions and guiding me toward resolving issues more quickly. This capability has significantly reduced the time I spend stuck on problems and has improved my ability to tackle complex challenges efficiently.

Accelerating Research and Finding Instant Answers

The research phase of development used to be a time-consuming process. It involved querying search engines, filtering through results, and sometimes ending up in forums for detailed answers. AI has revolutionized this aspect of my work.

Now, when I need information, I can ask the AI directly and often receive accurate answers immediately. This shift from searching to querying has saved me hours of research time, allowing me to focus more on implementing solutions rather than hunting for them. The AI’s ability to provide concise and relevant information has streamlined my workflow, making it easier to stay on top of the latest technologies and best practices.

Enhancing and Adjusting Code with AI Assistance

AI’s role in enhancing and adjusting code has been particularly impactful. Whether it’s optimizing a function, improving query performance, or ensuring security best practices, AI offers actionable suggestions that I can quickly apply. These recommendations are typically robust enough to implement with minimal adjustments, allowing me to maintain high standards even under tight deadlines.

Furthermore, AI’s suggestions often spark new ideas for improvements or adjustments that I hadn’t considered. This iterative process of feedback and refinement has led to more innovative and effective solutions, elevating the overall quality of my work.

Navigating Challenges and Adjusting Context

While AI has been an invaluable tool, it’s not without its challenges. Sometimes, the AI may seem to get lost or provide responses that aren’t entirely on point. In such cases, I’ve learned to adjust my approach by clarifying the context or resetting the conversation if it starts going in circles.

For example, if the AI’s responses don’t align with my needs, I can refine my queries or provide additional context to guide the AI towards more relevant answers. This iterative adjustment process ensures that I get the most out of the AI’s capabilities, making it a more effective tool in my development toolkit.

Refining Ideas Through AI Interaction

One of the most surprising benefits of using AI is its ability to help refine incomplete or partially formed ideas. By feeding the AI my initial concepts or questions, I can engage in a dialogue that helps shape and refine these ideas into effective solutions.

For instance, if I have a rough idea for a feature or an improvement, I can describe it to the AI and receive feedback that helps me flesh out the details. This interactive process has been instrumental in turning vague concepts into actionable plans, allowing me to approach problems with greater clarity and confidence.

AI: A Knowledgeable Companion in Development

In essence, AI has become like an experienced, always-available mentor. Its broad knowledge base and ability to provide timely, relevant suggestions have enhanced my skills and productivity in ways I hadn’t anticipated. The experience of working with AI has not only improved my coding practices but also fostered a more innovative and efficient approach to problem-solving.

While there are occasional challenges, such as navigating less relevant responses, my experience with AI has taught me how to effectively adjust the context and steer conversations to get the answers I need. Embracing AI has been a transformative experience, making it a valuable asset in my journey as a software developer. If you haven’t yet explored AI in your workflow, I highly recommend giving it a try—it might just be the boost you need to elevate your productivity and work quality to new heights.

Enjoy!

The Day I Automated XML Field Checking with Python

Rafa Rafael — Tue, 13 Aug 2024 19:01:00 +0000

It all started when I was given the task of checking several XML files for missing fields. The team needed to ensure that all mandatory fields were present in these files before we could proceed with our next steps. Sounds simple enough, right? Well, not quite.

I opened the first XML file, scanned through the properties, manually looked for the required fields, and ticked the boxes as I went. As you might expect, it got tiring very quickly. After just a couple of minutes in one file, my eyes were glazing over, and I had no real confidence that I hadn’t missed something crucial. I mean, XMLs can be so finicky, and a single missing field could cause major problems down the line.

I had this gnawing feeling of dread, knowing I still had a bunch of files to go through. And, of course, accuracy was critical—one overlooked missing field could spell disaster. So after taking a few deep breaths and a moment to think, I decided there had to be a better way to tackle this.

The Epiphany: Automation to the Rescue

Being a programmer, I had an idea: why not write a script to do this monotonous work for me? Instead of manually checking every single field, I could automate it and guarantee accuracy while saving my sanity in the process. It was time to harness the power of Python.

The concept was simple:

I had a list of required fields stored in a JSON file, which made the script highly reusable and adaptable. By using this approach, the script can easily process other XML files, even those with different structures. You simply need to update the JSON file with the required fields for any new XML format, allowing the script to automatically adjust to different XML schemas without modification.
I needed to write a Python script that would go through each XML file, check if any of the required fields were missing, and then output a summary.

This way, I could easily identify how many times a field was missing in each file, how many properties were present, and get a clear report—no more endless manual checks, no more mistakes. Here’s how I approached it.

Writing the Utility Script

First things first, I needed to load the list of required fields. These were stored in a JSON file under the key required_fields, so I wrote a function to read this file:

import os
import json
import xml.etree.ElementTree as ET

def load_required_fields(json_file_path):
    with open(json_file_path, 'r') as file:
        data = json.load(file)
        return data.get("required_fields", [])

Then came the real magic. I wrote a function to parse each XML file, loop through its properties, and check for the presence of each required field:

def check_missing_fields(file_path, required_fields):
    # Load the XML file
    tree = ET.parse(file_path)
    root = tree.getroot()

    # Initialize variables to store counts and track missing fields
    total_properties = 0
    missing_fields_counts = {field: 0 for field in required_fields}

    # Loop through each property to check for missing fields
    for property in root.findall('.//property'):
        total_properties += 1
        for field in required_fields:
            # Use the find() method to look for direct children of the property element
            element = property.find(f'./{field}')
            # Check if the field is completely missing (not present)
            if element is None:
                missing_fields_counts[field] += 1

    # Print the results
    print('-----------------------------------------')
    print(f'File: {os.path.basename(file_path)}')
    print(f'Total number of properties: {total_properties}')
    print('Number of properties missing each field:')
    for field, count in missing_fields_counts.items():
        print(f'  {field}: {count} properties')
    print('-----------------------------------------')

This function loaded an XML file, counted the number of properties, and kept track of how many properties were missing each required field. The function printed out a report showing the results for each file processed.

Finally, I put everything together in the main() function. It would iterate over all the XML files in a specified directory and run the field-checking function on each of them:

def main():
    # Directory containing XML files
    xml_dir = 'xmls'
    json_file_path = 'required_fields.json'

    # Load required fields from JSON file
    required_fields = load_required_fields(json_file_path)

    # Iterate over each file in the xmls directory
    for file_name in os.listdir(xml_dir):
        if file_name.endswith('.xml'):
            file_path = os.path.join(xml_dir, file_name)
            check_missing_fields(file_path, required_fields)

if __name__ == "__main__":
    main()

After running the process, you will receive a summary of the results similar to this:

File: properties.xml
Total number of properties: 4170
Number of properties missing each field:
  Title: 0 properties
  Unit_Number: 0 properties
  Type: 0 properties
  Bedrooms: 0 properties
  Bathrooms: 0 properties
  Project: 0 properties
  Price: 0 properties
  VAT: 0 properties
  Status: 10 properties
  Area: 0 properties
  Location: 100 properties
  Latitude: 30 properties
  Longitude: 0 properties
  Apartment_Floor: 0 properties
  Block: 0 properties
  Phase: 0 properties
  Construction_Stage: 0 properties
  Plot_Size: 0 properties
  Yard: 120 properties
  Description: 0 properties
  gallery: 27 properties

The Results: Sanity Saved

Once I had everything in place, I ran the script on my directory of XML files. The output was exactly what I needed: a concise summary showing me how many properties in each file were missing which fields, and the total count of properties in each XML.

Instead of spending hours manually checking each file, I got my answer in a matter of seconds. The script caught several missing fields that I might have overlooked if I had continued down the manual route.

Lessons Learned

Automation is a lifesaver: Whenever you’re faced with repetitive tasks, think about how you can automate them. Not only will it save you time, but it will also reduce the risk of human error.
Accuracy matters: In situations like these, accuracy is paramount. A simple script like the one I wrote can ensure that you don’t overlook anything, which is especially important when dealing with critical data.
Leverage your programming skills: Sometimes, we get caught up in doing things manually, even when we have the skills to make our lives easier. Take a moment to step back and ask yourself, “Is there a more efficient way to do this?”

In the end, what started as a tiresome, error-prone task turned into a rewarding experience. Now, whenever I get tasks that feel tedious or prone to mistakes, I remind myself of the power of scripting and automation. I wonder how many other tasks I can streamline next…

You can quickly get started with this automation by cloning the XML Checker repository I’ve created. This will give you everything you need, including the script and the example files. From there, you’ll be able to run the automation yourself, customize it to fit your needs or extend its functionality even further.

Enjoy!

Crafting a Reusable Model Search in Laravel: Efficient Setup and Best Practices

Rafa Rafael — Sun, 11 Aug 2024 15:14:00 +0000

When developing web applications, especially those that involve complex data retrieval, having a reusable model search mechanism can significantly streamline your codebase. This blog will walk you through creating a reusable search functionality for your Laravel models and discuss the most efficient setup for optimal performance.

Why Reusable Model Search?

Reusable model search is a design pattern that allows you to encapsulate common search logic in a single, reusable place. This approach helps in:

Reducing Code Duplication: You avoid repeating the same search logic across different parts of your application.
Improving Maintainability: Centralized search logic is easier to maintain and update.
Enhancing Scalability: As your application grows, having a reusable search mechanism can help you quickly implement new features.

Setting Up a Reusable Model Search

The core of this reusable search setup involves leveraging Laravel’s powerful query builder and Eloquent model features. Here’s how you can implement it:

1. Creating a Searchable Trait
A common approach is to create a Searchable trait that can be used across different models. This trait will house the logic for filtering and searching based on various criteria.

<?php

namespace App\Traits;

trait Searchable
{
    public function scopeSearch($query, array $filters)
    {
        foreach ($filters as $filter => $value) {
            if (method_exists($this, $method = 'filter' . ucfirst($filter))) {
                $this->$method($query, $value);
            } else {
                $query->where($filter, 'like', '%' . $value . '%');
            }
        }

        return $query;
    }
}

In this example:

The scopeSearch method is defined, making it accessible as a query scope.
The method iterates through the filters and applies each one to the query.
If a specific filter method (e.g., filterName, filterEmail) exists in the model, it will be used. Otherwise, a default where condition with a like clause is applied.

2. Implementing the Trait in Your Models

Next, implement the Searchable trait in your models:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use App\Traits\Searchable;

class User extends Model
{
    use Searchable;

    // Define custom filters if needed
    public function filterRole($query, $value)
    {
        return $query->where('role', $value);
    }
}

This setup allows you to search within the User model using custom filters or the default search behavior.

3. Using the Search Functionality

Now, you can use the search functionality in your controllers or services as follows:

$filters = [
    'name' => 'John',
    'email' => 'example@example.com',
    'role' => 'admin'
];

$users = User::search($filters)->get();

Here, the search method applies the filters and returns the filtered results.

Optimizing for Performance

While the above setup works well for many use cases, performance can become an issue when dealing with large datasets or complex queries. Below are some tips to ensure efficiency:

1. Indexing Database Columns

Make sure the columns you’re searching against are indexed. For instance, if you’re frequently searching by name, email, or role, consider adding indexes to those columns:

php artisan make:migration add_indexes_to_users_table

Schema::table('users', function (Blueprint $table) {
    $table->index('name');
    $table->index('email');
    $table->index('role');
});

2. Use Eager Loading

If your search involves relationships, make sure to use eager loading to avoid the N+1 query problem:

$users = User::with('roles')->search($filters)->get();

3. Limit Results

For searches that might return large result sets, consider implementing pagination or limiting the number of results:

$users = User::search($filters)->paginate(20);

Conclusion

Implementing a reusable model search in Laravel not only helps in reducing code duplication but also enhances the maintainability and scalability of your application. By following the steps outlined above and considering performance optimizations, you can create an efficient and robust search mechanism tailored to your application’s needs.

Feel free to adapt and expand upon these methods based on your specific use case. Happy coding!

This blog provides an overview of how to set up a reusable search mechanism in Laravel, with a focus on efficiency and best practices. Whether you’re working on a small project or a large-scale application, this approach will help you maintain clean and performant code.

Enjoy!

Building a Polymorphic Translatable Model in Laravel with Autoloaded Translations

Rafa Rafael — Sun, 11 Aug 2024 09:43:00 +0000

When handling multilingual content, it’s often more efficient to store translations in a JSON column rather than individual rows for each attribute. This approach consolidates translations into a single column, simplifying data management and retrieval.

Setting Up the Translation System

We’ll enhance our Translation model and table to use a JSON column for storing translations. This will involve updating the table schema and modifying the Translatable trait to handle JSON data.

Step 1: Create Translations Table Migration

If the translations table does not already exist, create a new migration:

php artisan make:migration create_translations_table

Step 2: Define the Table Structure

Open the generated migration file in database/migrations. For a new table, define it as follows:

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateTranslationsTable extends Migration
{
    public function up()
    {
        Schema::create('translations', function (Blueprint $table) {
            $table->id();
            $table->string('locale'); // Stores the locale, e.g., 'en', 'fr'
            $table->string('translatable_type'); // Stores the related model type, e.g., 'Post', 'Product'
            $table->unsignedBigInteger('translatable_id'); // Stores the ID of the related model
            $table->json('translations'); // Stores all translations as a JSON object
            $table->timestamps();
        });
    }

    public function down()
    {
        Schema::dropIfExists('translations');
    }
}

Step 3: Run the Migration
Apply the migration to your database:

php artisan migrate

Step 4: Create the Translation Model

Next, create the Translation model to handle the polymorphic relationship:

php artisan make:model Translation

In the Translation model, define the polymorphic relationship:

class Translation extends Model
{
    protected $fillable = ['locale', 'translatable_type', 'translatable_id', 'translations'];

    protected $casts = [
        'translations' => 'array',
    ];

    public function translatable()
    {
        return $this->morphTo();
    }
}

Implementing the Translatable Trait with JSON Storage

To make translation handling reusable across multiple models, we’ll create a Translatable trait that will automatically load the translated content based on the user’s selected locale. Additionally, we’ll add a fallback mechanism to load content from the default locale if no translation is available for the selected locale.

Step 1: Create the Translatable Trait with JSON Handling

namespace App\Traits;

use App\Models\Translation;
use Illuminate\Support\Facades\App;

trait Translatable
{
    public static function bootTranslatable()
    {
        static::retrieved(function ($model) {
            $model->loadTranslations();
        });
    }

    public function translations()
    {
        return $this->morphMany(Translation::class, 'translatable');
    }

    public function loadTranslations()
    {
        $locale = App::getLocale();
        $defaultLocale = config('app.default_locale', 'en'); // Fallback to the default locale

        // Try to load translations for the current locale
        $translation = $this->translations()->where('locale', $locale)->first();

        if (!$translation && $locale !== $defaultLocale) {
            // If no translations are found for the current locale, fallback to the default locale
            $translation = $this->translations()->where('locale', $defaultLocale)->first();
        }

        if ($translation) {
            $translations = $translation->translations;
            foreach ($translations as $key => $value) {
                $this->{$key} = $value;
            }
        }
    }

    public function addTranslations(array $translations, $locale = null)
    {
        $locale = $locale ?? App::getLocale();
        return $this->translations()->updateOrCreate(
            ['locale' => $locale],
            ['translations' => $translations]
        );
    }
}

Step 2: Apply the Translatable Trait to Your Model
Add the Translatable trait to any model requiring translation support.

namespace App\Models;

use App\Traits\Translatable;
use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    use Translatable;

    protected $fillable = ['title', 'content'];
}

Example: Creating a Translated Model

Add translations as a JSON object:

$post = Post::create(['title' => 'Default Title', 'content' => 'Default Content']);

// Adding translations
$post->addTranslations([
    'title' => 'Hello World',
    'content' => 'Welcome to our website'
], 'en');

$post->addTranslations([
    'title' => 'Bonjour le monde',
    'content' => 'Bienvenue sur notre site Web'
], 'fr');

Retrieving Translated Models

When you retrieve the Post model, it will automatically load the translated content based on the current locale or fall back to the default locale if necessary:

App::setLocale('fr');
$post = Post::find(1);
echo $post->title; // Displays "Bonjour le monde" if French translation exists

App::setLocale('es');
$post = Post::find(1);
echo $post->title; // Displays "Hello World" as it falls back to the English translation

Displaying Translated Content in Views

In your Blade views, you can display the translated content like any other model attribute:

<h1>{{ $post->title }}</h1>
<p>{{ $post->content }}</p>

Conclusion

By using a JSON column to store translations and implementing a fallback mechanism, you streamline the management of multilingual content in your Laravel application. This approach consolidates translations into a single column, simplifying data handling and making your codebase more maintainable. Whether you’re building a blog, e-commerce site, or any multilingual application, this method ensures a smooth and efficient user experience.

Enjoy!

DEV Community: Rafa Rafael

The Frontend Fortress: Building a Bulletproof Code Quality Pipeline

1. Static Analysis: The First Line of Defense

TypeScript (Strict Mode)

ESLint (The Logic Police)

2. Enforce Architecture: Dependency Cruiser

3. Git Hooks: The Gatekeeper

4. The Brain: AI Instructions (The Most Important Part)

Conclusion

Enjoy!

The Invisible Wall: Building a Bulletproof Code Quality Pipeline in Laravel

1. Static Analysis: Logic Checks Without Execution

Larastan (PHPStan for Laravel)

Rector

2. Enforce Architecture with Tests

3. Git Hooks: The First Line of Defense

4. Security & Maintenance

Enlightn

Composer Audit

5. The Brain: Strict AI Instructions

Laravel Copilot Instructions

Conclusion

Enjoy!

🛡️ Introducing CodeSnoutr — AI-Powered Code Scanner for Laravel Developers

🚀 What Is CodeSnoutr?

🧠 How It Works

🧩 Key Features (Based on the Latest Changelog)

✅ 1. Laravel Code Scanning Engine

💻 2. Modern Web Dashboard

⚙️ 3. Artisan Commands

🤖 4. AI-Powered Auto-Fix

🧱 5. Laravel-Native Integration

🧭 Why You’ll Love Using CodeSnoutr

💡 Example Use Case

🧰 Getting Started in Seconds

💻 Contribute & Collaborate

🧩 Final Thoughts

🎬 How to Convert and Compress MOV to MP4 Using FFmpeg on macOS (Without Losing Quality)

🧩 A Real-World Developer Scenario

🚀 Why Compress Videos?

✅ 1. Faster Load Times

✅ 2. Lower Hosting Costs

✅ 3. Improved SEO

✅ 4. Better Compatibility

✅ 5. Retain Quality

🛠️ Enter ffmpeg: Your Compression Power Tool

🧑‍💻 Step-by-Step: Convert and Compress .mov to .mp4

1. Install ffmpeg on macOS

2. Basic Conversion & Compression Command

What This Does:

🪄 Want to Shrink Resolution Too?

🧾 Bonus: Batch Convert All .mov Files in a Folder

📜 Shell Script: convert-all-mov.sh

📦 How to Use It

📁 Folder Structure Example

🧠 Final Thoughts

Essential Layout Considerations for Web Pages Using Tailwind CSS

1. Avoiding Multiple Scrollbars

2. Prevent Layout Breakage When Section Dimensions Change

3. Adding Sticky Sections Easily

4. Preventing Overlapping Layouts

5. Ensuring Responsive Design

6. Avoiding Fixed Heights for Dynamic Content

7. Managing White Space and Alignment

8. Optimizing for Accessibility

9. Avoiding Over-reliance on Absolute Positioning

Conclusion

Load Images Faster in Laravel and JavaScript

1. Optimize Image Files Before Uploading

2. Use Laravel’s Image Caching and Manipulation

3. Leverage Lazy Loading in JavaScript

4. Use Content Delivery Networks (CDNs)

5. Implement WebP Images

6. Defer Offscreen Images in JavaScript

Implementing Infinite Scroll with Laravel and Vue.js 3

Section 1: Setting Up the Basic Vue.js 3 Component for Infinite Scroll

Step 1: Create the Backend API

Step 2: Create the UserList Component with Infinite Scroll

Step 3: Integrate the Component in Your Vue App

Section 2: Managing Infinite Scroll with Vuex

🛠️ Enter `ffmpeg`: Your Compression Power Tool

🧑‍💻 Step-by-Step: Convert and Compress `.mov` to `.mp4`

1. Install `ffmpeg` on macOS

🧾 Bonus: Batch Convert All `.mov` Files in a Folder

📜 Shell Script: `convert-all-mov.sh`