Web Development Articles
Install and Configure ImageMagick for PHP with brew package manager
This tutorial will show you step-by-step how to use brew package manager to install ImageMagick and then configure it to work with PHP.
First check if ImageMagick already exists. Either command below should do that for you.
brew info imagemagick
If ImageMagick isn't installed you can simply use the command below to install it.
brew install imagemagick
Now we need to setup PHP to use the ImageMagick extension. To do so we can use the pecl package manager.
Check if pkg-config is installed.
brew info pkg-config
If pkg-config isn’t installed run the following command.
Set a few configurations for pecl. Run the following 3 commands.
export PKG_CONFIG_PATH="$(brew --prefix imagemagick)/lib/pkgconfig"
export CPPFLAGS="-I$(brew --prefix imagemagick)/include/ImageMagick-7"
export CFLAGS="-DMAGICKCORE_HDRI_ENABLE=1 -DMAGICKCORE_QUANTUM_DEPTH=16"
Install the pecl imagick extension.
pecl install imagick
Restart PHP with brew.
brew services restart php
Check that gd and imagick extensions are set up properly.
php -m | grep -E "gd|imagick"
And that’s it! You may run into an issue with a non-existing imagick extension. If you have multiple versions of PHP installed and frequently switch between different versions you will need to install the Imagick extension for each PHP version.
Solve Vue.js Component Overload with Parent-Child Patterns
Has your Vue component become a tangled mess? Too much template markup, too many responsibilities, and decreasing maintainability.
Well the solution is to use component composition with parent-child relationships that Vue provides.
In this tutorial, you'll learn to:
1. Refactor effectively breaking up monolithic components into focused children
2. Pass data gracefully using props to send data from parent to child
3. Handle child events by capturing custom events emitted by child components
4. Maintain clean data flow by establishing predictable communication between components
See a real-world example where a parent component delegates UI to a specialized Toolbar child, creating cleaner code and better separation of concerns.
Parent Component:
<template>
<div class="parent-component">
<h2>Evaluate Product</h2>
<Toolbar :message="message" @evaluate-product="evaluate" />
<div class="parent-data">
<p>Total Likes: {{ total.likes }}</p>
<p>Total Dislikes: {{ total.dislikes }}</p>
<p v-if="action">Last Action: {{ action }}</p>
</div>
</div>
</template>
<script>
import Toolbar from './Toolbar.vue';
export default {
name: 'EvaluateComponent',
components: {
Toolbar
},
data(){
return {
total: {
likes: 0,
dislikes: 0
},
message: '',
action: null,
messageTimeout: null
}
},
methods:{
evaluate(task) {
// Clear previous timeout
if (this.messageTimeout) {
clearTimeout(this.messageTimeout);
}
switch(task) {
case 'like':
this.total.likes++;
this.message = "Like incremented successfully!";
this.action = 'like';
break;
case 'dislike':
this.total.dislikes++;
this.message = "Dislike incremented successfully!";
this.action = 'dislike';
break;
}
// Auto-clear message after 3 seconds
this.messageTimeout = setTimeout(() => {
this.message = '';
}, 3000);
}
},
beforeDestroy() {
// Clean up timeout when component is destroyed
if (this.messageTimeout) {
clearTimeout(this.messageTimeout);
}
}
}
</script>
Child Component (Toolbar tag in the parent):
<template>
<div class="child-component">
<div class="message" v-if="messageSet">{{ message }}</div>
<button @click="performEvaluate('like')">Like</button>
<button @click="performEvaluate('dislike')">Dislike</button>
</div>
</template>
<script>
export default {
props: {
message: {
type: String,
default: ''
}
},
data() {
return {
// You can add data properties here if needed
}
},
emits: ['evaluate-product'],
computed: {
messageSet() {
return this.message.length > 0;
}
},
methods: {
performEvaluate(evaluation) {
this.$emit('evaluate-product', evaluation);
}
}
}
</script>
Master JavaScript Asynchronous Programming with Promise.allSettled()
The Promise.allSettled() method is a powerful tool for handling multiple promises in JavaScript. It returns a single Promise that resolves with an array of objects, each representing the outcome of a promise in the input array.
Each outcome object contains a status property, which is either 'fulfilled' or 'rejected'.
- If the status is 'fulfilled', the object will also contain a value property with the resolved value.
- If the status is 'rejected', the object will contain a reason property with the error (typically the value passed to reject).
Key Difference: Promise.allSettled() vs. Promise.all()
Unlike Promise.all(), which immediately rejects if any promise in the iterable is rejected, Promise.allSettled() never short-circuits. It waits for all promises to settle (either fulfill or reject), making it ideal for use cases where you need to know the result of every asynchronous operation, regardless of individual failures. This provides a more robust way for error handling in async/await and promise chains.
When to use Promise.allSettled() in JavaScript?
Use it whenever you need to process the results of multiple independent asynchronous operations and you don't want a single failure to prevent you from handling the others. Common scenarios include making multiple API calls or database queries where individual failures are non-critical.
The following example demonstrates how to use Promise.allSettled() to handle a mix of successful and failed promises.
// Example: Handling multiple API calls or asynchronous tasks
const p1 = new Promise((resolve, reject) => {
setTimeout(resolve, 200, "Data for User 1"); // Simulates a successful API call
});
const p2 = new Promise((resolve, reject) => {
setTimeout(resolve, 200, "Data for User 2"); // Simulates another successful call
});
const p3 = new Promise((resolve, reject) => {
setTimeout(reject, 200, "User 3 not found"); // Simulates a failed API call (e.g., 404)
});
const p4 = new Promise((resolve, reject) => {
setTimeout(reject, 200, "Server error for User 4"); // Simulates a server error (e.g., 500)
});
// Execute all promises and handle results with allSettled
Promise.allSettled([p1, p2, p3, p4])
.then(results => {
console.log("All operations settled:");
results.forEach((result, index) => {
if (result.status === 'fulfilled') {
console.log(`Promise ${index + 1}: Success -`, result.value);
} else {
console.log(`Promise ${index + 1}: Failed -`, result.reason);
}
});
});
// ** CONSOLE OUTPUT **
// All operations settled:
// Promise 1: Success - Data for User 1
// Promise 2: Success - Data for User 2
// Promise 3: Failed - User 3 not found
// Promise 4: Failed - Server error for User 4
How to use JavaScript Promise catch()
There are a few ways to take advantage of the Promise catch method. The catch() method is run when the Promise is rejected or throws an error. Return value from a Promise is passed forward to the catch() method. Promises can be chained as well. It simply forwards the return value from the chained Promise to the catch method if the Promise is rejected or an error is thrown.
A basic example of using catch() with a Promise reject:
// using Promise.reject
let rejectPromise = new Promise(function(resolve, reject){
reject("promise rejected")
})
function displayCatch(x) {
console.log(x)
}
rejectPromise.catch(x => displayCatch(x))
A basic example of using catch() by throwing an error from the promise:
// throw an error
let promiseError = new Promise(function(resolve, reject){
throw "throw error"
})
function displayCatch(x) {
console.log(x)
}
promiseError.catch(x => displayCatch(x));
Chained promises. Reject or throw error from chained Promise:
let resolvePromise = new Promise(function(resolve, reject) {
setTimeout(resolve, 50, "resolved chained");
})
function resolveDisplay(x) {
console.log(x)
throw "throw error from chained Promise"
}
function displayCatch(x) {
console.log(x)
}
resolvePromise.then(x => resolveDisplay(x)).catch(x => displayCatch(x))
JavaScript Promises and Asynchronous Handling Explained
Have you ever made an HTTP API request in JavaScript, only to find the data you need is mysteriously unavailable? You're confident the server-side API works, as you've tested it repeatedly. The issue often lies in JavaScript's asynchronous nature.
JavaScript doesn't pause execution to wait for slow operations, like API calls, to complete. Instead, it triggers the request and immediately moves on to the next line of code. By the time your script tries to use the response data, the request may not have finished.
This is where the Promise object becomes essential. A Promise represents the eventual completion (or failure) of an asynchronous operation and its resulting value. Let's explore how to use them effectively.
First let’s take a look at the most commonly used methods available on a JavaScript Promise object (Promise.then()):
1. Basic Promise Handling with .then()
The .then() method is the primary way to interact with a Promise. You can pass it two functions: one to handle a successful resolution and another to handle a rejection.
let name = "Mary";
const promise = new Promise((resolve, reject) => {
name == "Mary" ? resolve(name) : reject(name);
});
// promise.then(onFulfilled, onRejected)
promise.then(
x => console.log(`Name resolved: ${x}`), // Called if resolved
x => console.log(`Name rejected: ${x}`) // Called if rejected
);
// Expected output: "Name resolved: Mary"
2. Chaining Multiple .then() Methods
Promises are powerful because they can be chained, allowing you to define a sequence of asynchronous steps. Each .then() in the chain receives the result from the previous one.
let name = "Mary";
// Function passed to the Promise constructor
const analyzeName = (resolve, reject) => {
name == "Mary" ? resolve(name) : reject(name);
};
// Handler for a resolved promise
const nameResolved = (x) => {
console.log(`Name resolved: ${x}`);
return x; // Pass the value to the next .then()
};
// Handler for a rejected promise
const nameRejected = (x) => {
console.log(`Name rejected: ${x}`);
return x; // Even on rejection, we can pass the value down the chain
};
// Subsequent steps in the process
const step2 = (x) => {
console.log(`Step 2: Processing ${x}`);
return x;
};
const step3 = (x) => {
console.log(`Final Step: ${x}`);
return x;
};
const namePromise = new Promise(analyzeName);
namePromise
.then(nameResolved, nameRejected) // Handles the initial result
.then(step2) // Receives the value from nameResolved/nameRejected
.then(step3); // Receives the value from step2
// Console Output:
// Name resolved: Mary
// Step 2: Processing Mary
// Final Step: Mary
By using Promises and its .then() method, you gain precise control over the flow of your asynchronous code. This ensures that each step waits for the previous one to complete before executing, which is the fundamental solution to the "missing data" problem in async operations like API calls. For modern, cleaner syntax, consider using async/await, which is built on top of Promises.
Here is a comprehensive example that builds on the previous explanation by adding .catch() and .finally() methods, which are crucial for robust promise handling.
While .then() handles successful outcomes, a complete promise chain needs ways to handle errors and cleanup operations. This is where .catch() and .finally() come in.
- catch() - Handles any rejection that occurs in the chain
- finally() - Executes regardless of success or failure, perfect for cleanup
Below I’ve included a real-world example with HTTP request and a more practical example of its use with proper error handling.
Practical Example: User Data Fetch with Complete Error Handling
// Simulate fetching user data from an API
const fetchUserData = (userId) => {
return new Promise((resolve, reject) => {
console.log(`Fetching data for user ${userId}...`);
// Simulate API call delay
setTimeout(() => {
const users = {
1: { id: 1, name: "Alice", role: "admin" },
2: { id: 2, name: "Bob", role: "user" }
};
const user = users[userId];
if (user) {
resolve(user); // Success case
} else {
reject(new Error(`User ${userId} not found`)); // Error case
}
}, 1000);
});
};
// Processing functions for our chain
const validateUserRole = (user) => {
console.log(`Validating role for: ${user.name}`);
if (user.role !== 'admin') {
throw new Error('Insufficient permissions'); // This will trigger .catch()
}
return user; // Pass to next .then()
};
const logAccess = (user) => {
console.log(`Access granted to ${user.name} (${user.role})`);
return user;
};
// Example 1: Successful chain
console.log('=== SUCCESSFUL REQUEST ===');
fetchUserData(1) // Returns Alice (admin)
.then(validateUserRole)
.then(logAccess)
.then(user => {
console.log(`Final success: ${user.name} is logged in`);
return user;
})
.catch(error => {
console.error('Error:', error.message);
return { error: true, message: error.message }; // Recover from error
})
.finally(() => {
console.log('Request completed - cleaning up resources\n');
});
// After 1 second, this will output:
// Fetching data for user 1...
// Validating role for: Alice
// Access granted to Alice (admin)
// Final success: Alice is logged in
// Request completed - cleaning up resources
Real-Word HTTP Request Example
// Real-world example with fetch API
const loadUserProfile = (userId) => {
console.log(`Starting profile load for user ${userId}`);
fetch(`/api/users/${userId}`)
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json(); // Parse JSON response
})
.then(userData => {
console.log('User data received:', userData);
// Continue with data process in .then()
return processUserData(userData);
})
.then(processedData => {
updateUI(processedData);
})
.catch(error => {
console.error('Failed to load profile:', error);
showErrorMessage('Failed to load user profile');
})
.finally(() => {
hideLoadingSpinner(); // Always hide spinner, success or failure
console.log('Profile load operation completed');
});
};
// Mock functions for the example
const processUserData = (data) => {
console.log('Processing user data...');
return { ...data, processed: true };
};
const updateUI = (data) => {
console.log('Updating UI with:', data);
};
const showErrorMessage = (message) => {
console.log('Showing error:', message);
};
const hideLoadingSpinner = () => {
console.log('Loading spinner hidden');
};
// Simulate calling the function
// loadUserProfile(123);
As you can see from the last 2 examples, this pattern ensures your asynchronous code is robust, maintainable, and properly handles both success and failure scenarios.
Below is a comprehensive list of the static methods and instance methods available on a Promise:
Static Methods (Called on Promise class)
Promise.all()
- Returns a single Promise that resolves when all promises in the iterable have resolved
- Rejects immediately if any promise in the iterable rejects
- Results are in the same order as input promises
Promise.allSettled()
- Returns a single Promise that resolves when all promises in the iterable have settled (either fulfilled or rejected)
- Never rejects - always resolves with an array of outcome objects showing each promise's status and value/reason
Promise.any()
- Returns a single Promise that resolves when any promise in the iterable fulfills
- Only rejects if all promises are rejected (with an AggregateError)
Promise.race()
- Returns a single Promise that settles based on the first promise in the iterable to settle (whether fulfilled or rejected)
- Adopts the state and value/reason of the first settling promise
Promise.resolve()
-
Returns a Promise object that is resolved with the given value
-
Creates an immediately fulfilled promise
Promise.reject()
- Returns a Promise object that is rejected with the given reason
- Creates an immediately rejected promise
Instance Methods (Called on Promise instances)
.then()
- Attaches callbacks for when the promise is fulfilled or rejected
- Returns a new promise allowing for method chaining
- Takes two optional arguments: onFulfilled and onRejected handlers
.catch()
- Attaches a callback for when the promise is rejected
- Returns a new promise (sugar syntax for .then(null, onRejected))
.finally()
- Attaches a callback that executes regardless of fulfillment or rejection
- Useful for cleanup operations that should always run
- Returns a new promise that preserves the original settlement state
Mastering Promise Chaining with .then() in JavaScript
Have you ever made an HTTP API request in JavaScript, only to find the data you need is mysteriously unavailable? You're confident the server-side API works, as you've tested it repeatedly. The issue often lies in JavaScript's asynchronous nature.
JavaScript doesn't pause execution to wait for slow operations, like API calls, to complete. Instead, it triggers the request and immediately moves on to the next line of code. By the time your script tries to use the response data, the request may not have finished.
This is where the Promise object becomes essential. A Promise represents the eventual completion (or failure) of an asynchronous operation and its resulting value. Let's explore how to use them effectively.
1. Basic Promise Handling with .then()
The .then() method is the primary way to interact with a Promise. You can pass it two functions: one to handle a successful resolution and another to handle a rejection.
var name = "Mary"
const promise = new Promise((resolve, reject) => {
name == "Mary" ? resolve(name) : reject(name)
});
// promise.then(ifResolved, ifRejected)
promise.then(
x => console.log(`name resolved: ${x}`),
x => console.log(`name rejected: ${x}`)
) // expected output "name resolved: Mary"
2. Chaining Multiple .then() Methods
Promises are powerful because they can be chained, allowing you to define a sequence of asynchronous steps. Each .then() in the chain receives the result from the previous one.
var name = "Mary"
// initial method provided to the Promise
const analyzeName = (resolve, reject) => {
name == "Mary" ? resolve(name) : reject(name)
}
// method to handle resolved
const nameResolved = x => {
console.log(`Name resolved: ${x}`)
return x
}
// method to handle rejected
const nameRejected = x => {
console.log(`Name rejected: ${x}`)
return x
}
// Step 2
const step2 = x => {
console.log(`Step 2: ${x}`)
return x
}
// Step 3
const step3 = x => {
console.log(`Final Step: ${x}`)
return x
}
const namePromise = new Promise(analyzeName)
namePromise.then(
x => nameResolved(x), // Expected "Name Resolved: Mary"
x => nameRejected(x) // Expected "Name Rejected Mary"
)
.then(x => step2(x)) // Expected "Step 2: Mary"
.then(x => step3(x)) // Expected "Final Step: Mary"
// Name Resolved: Mary
// Step 2: Mary
// Final Step: Mary
Key Takeaway
By using Promises and their .then() method, you gain precise control over the flow of your asynchronous code. This ensures that each step waits for the previous one to complete before executing, which is the fundamental solution to the "missing data" problem in async operations like API calls. For modern, cleaner syntax, consider using async/await, which is built on top of Promises.
JavaScript Asynchronous Programming with Promise any()
Promise.any() is a powerful JavaScript method introduced in ECMAScript 2021 that allows you to handle multiple promises simultaneously. This method returns a single promise that resolves as soon as any one of the input promises fulfills, making it ideal for scenarios where you want the fastest successful result.
Browser and Node.js Compatibility
Node.js: 15.0.0+ (native support)
Chrome: 85+
Firefox: 79+
Safari: 14+
For optimal compatibility and performance, we recommend using the latest Node.js LTS version.
How Promise.any() Works
Promise.any() takes an iterable of promises and returns a promise that:
- Resolves with the value of the first successfully fulfilled promise
- Rejects only if all input promises are rejected
Key Characteristics:
- Returns the first successful promise (not necessarily the fastest)
- Ignores rejected promises until all promises fail
- Perfect for fallback strategies and redundancy
Practical Examples
Example 1: First Successful Promise Wins
// Create promises with different resolve/reject patterns
const fastPromise = new Promise((resolve, reject) => {
setTimeout(reject, 100, "fast: rejected");
});
const mediumPromise = new Promise((resolve, reject) => {
setTimeout(reject, 99, "medium: rejected");
});
const slowPromise = new Promise((resolve, reject) => {
setTimeout(resolve, 50, "slow: resolved");
});
const veryFastPromise = new Promise((resolve, reject) => {
setTimeout(() => resolve('very fast: resolved'), 205);
});
// Use Promise.any() to get the first successful result
Promise.any([slowPromise, mediumPromise, fastPromise, veryFastPromise])
.then((result) => {
console.log("First successful promise:", result);
// Output: "slow: resolved"
})
.catch(error => {
console.log("All promises failed");
});
Example 2: Handling Complete Failure
// All promises will be rejected
const rejectedFast = new Promise((resolve, reject) => {
setTimeout(reject, 100, "fast: rejected");
});
const rejectedMedium = new Promise((resolve, reject) => {
setTimeout(reject, 99, "medium: rejected");
});
const rejectedSlow = new Promise((resolve, reject) => {
setTimeout(reject, 50, "slow: rejected");
});
const rejectedVeryFast = new Promise((resolve, reject) => {
setTimeout(() => reject('very fast: rejected'), 205);
});
Promise.any([rejectedSlow, rejectedMedium, rejectedFast, rejectedVeryFast])
.then((result) => {
console.log("Success:", result);
})
.catch(error => {
console.log("Total failures:", error.errors.length);
// Iterate through all rejection reasons
error.errors.forEach((rejection, index) => {
console.log(`Failure ${index + 1}:`, rejection);
});
});
// Output:
// Total failures: 4
// Failure 1: slow: rejected
// Failure 2: medium: rejected
// Failure 3: fast: rejected
// Failure 4: very fast: rejected
Error Handling Best Practices
Always include a .catch() block when using Promise.any(). Without proper error handling, you might encounter:
UnhandledPromiseRejection: This error originated either by throwing inside of
an async function without a catch block, or by rejecting a promise which was
not handled with .catch(). The promise rejected with the reason "slow promise
Rejected".
Proper Error Handling Pattern:
Promise.any([promise1, promise2, promise3])
.then(result => {
// Handle successful result
console.log("Success:", result);
})
.catch(error => {
// Handle case where all promises failed
console.log("All promises rejected");
console.log("Rejection reasons:", error.errors);
})
.finally(() => {
// Cleanup code that runs regardless of outcome
console.log("Operation completed");
});
Real-World Use Cases
1. Multiple API Endpoints with Fallback
const primaryAPI = fetch('https://primary-api.com/data');
const backupAPI = fetch('https://backup-api.com/data');
const cacheAPI = fetch('https://cache-api.com/data');
Promise.any([primaryAPI, backupAPI, cacheAPI])
.then(response => response.json())
.then(data => {
console.log("Data from fastest available source:", data);
})
.catch(() => {
console.log("All data sources unavailable");
});
2. Resource Loading with Redundancy
const cdn1 = loadScript('https://cdn1.com/library.js');
const cdn2 = loadScript('https://cdn2.com/library.js');
const cdn3 = loadScript('https://cdn3.com/library.js');
Promise.any([cdn1, cdn2, cdn3])
.then(() => {
console.log("Library loaded successfully");
initializeApp();
})
.catch(() => {
console.error("All CDNs failed - using local fallback");
loadLocalFallback();
});