Web Development Articles
PHP Object Oriented Class Inheritance
PHP class inheritance is a mechanism that allows one class (called the child class or subclass) to inherit properties and methods from another class (called the parent class or superclass).
This allows you to reuse code, extend existing functionality, and follow the principle of "Don’t Repeat Yourself (DRY)".
Basics of Inheritance
1. The extends keyword is used in PHP to create inheritance.
2. A child class automatically inherits all the public and protected properties and methods of its parent class.
3. The child class can:
A. Use the inherited methods and properties directly.
B. Override methods from the parent class.
C. Add new methods and properties.
Example 1: Basic Inheritance
Here, the Dog class inherits from the Animal class but overrides the speak() method.
// Parent class
class Animal {
public $name;
public function __construct($name) {
$this->name = $name;
}
public function speak() {
echo "$this->name makes a sound.<br>";
}
}
// Child class
class Dog extends Animal {
public function speak() {
echo "$this->name barks! Woof Woof!<br>";
}
}
// Usage
$animal = new Animal("Generic Animal");
$animal->speak(); // Output: Generic Animal makes a sound.
$dog = new Dog("Buddy");
$dog->speak(); // Output: Buddy barks! Woof Woof!
Example 2: Using parent:: to Call Parent Methods
The Car class overrides the start() method but still uses the parent’s method with parent::start().
class Vehicle {
public function start() {
echo "Starting the vehicle...<br>";
}
}
class Car extends Vehicle {
public function start() {
// Call the parent method first
parent::start();
echo "Car engine started!<br>";
}
}
$car = new Car();
$car->start();
// Output:
// Starting the vehicle...
// Car engine started!
Example 3: Multilevel Inheritance
Human inherits from Animal, and Animal inherits from LivingBeing. So, Human has all methods from both parents.
class LivingBeing {
public function breathe() {
echo "Breathing...<br>";
}
}
class Animal extends LivingBeing {
public function eat() {
echo "Eating...<br>";
}
}
class Human extends Animal {
public function speak() {
echo "Speaking...<br>";
}
}
$person = new Human();
$person->breathe(); // From LivingBeing
$person->eat(); // From Animal
$person->speak(); // From Human
Format Date and Time in JavaScript with Date Object
This tutorial The JavaScript Date library is a built-in object that represents a single moment in time. It provides methods for creating, parsing, formatting, and manipulating dates and times. Dates are stored as the number of milliseconds since the Unix epoch (January 1, 1970, 00:00:00 UTC).
In this tutorial I will cover how to format date only, time only, and both date and time using these 3 methods from built-in object Date. A method to format a date. A method to format a time. And a method to format both date and time.
const date = new Date('2025-10-23 11:06:48');
date.toLocaleDateString('en-US');
date.toLocaleTimeString('en-US');
date.toLocaleString('en-US');
Also, I have included 2 handy references at the end of this tutorial. A reference for options and values available to define the format. Also, a reference that lists all available methods on the Javascript built-in Date object.
Date toLocaleDateString()
The toLocaleDateString() method formats the date only. Below the value of the date will be initiated as datetime (yyyy-mm-dd hh:mm:ss):
const date = new Date('2025-10-23 11:06:48');
Even though the Date object is initiated with a date and time string, only the date part of the string will be extracted. The default date.toLocaleDateString('en-US') returns the date formatted as mm/dd/yyyy. Also use other formatting options available. The options are referenced below.
const date = new Date('2025-10-23 11:06:48');
// Date only
date.toLocaleDateString('en-US');
// "10/23/2025"
date.toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric'
});
// "October 23, 2025"
Date toLocaleTimeString()
Target and format the time portion of the string using toLocaleTimeString(). Now time is extracted from the initial value set below…
const date = new Date('2025-10-23 11:06:48');
The toLocaleTimeString() method can be used with or without options. The default time is in 12 hour format (hh:mm:ss AM/PM). Options are listed below:
// Time only
date.toLocaleTimeString('en-US');
// "11:06:48 AM"
date.toLocaleTimeString('en-US', {
hour: '2-digit',
minute: '2-digit',
hour12: true
});
// "11:06 AM"
Date toLocaleString()
To format both the date and time use toLocaleString(). This method also accepts options to provide formatting instructions. Refer to the list below.
// Combined date and time
date.toLocaleString('en-US');
// "10/23/2025, 11:06:48 AM"
date.toLocaleString('en-US').replace(/,/g, '');
// "10/23/2025 11:06:48 AM"
Below are all the possible format options that can be passed to toLocaleString() for the en-US locale.
Option Reference Table toLocaleString()
|
Parameter |
Possible Values |
Description |
Example Output |
|
DATE COMPONENTS |
|||
|
year |
'numeric' |
Full year |
2025 |
|
'2-digit' |
Two-digit year |
25 |
|
|
month |
'numeric' |
Month number |
10 |
|
'2-digit' |
Two-digit month |
10 |
|
|
'long' |
Full month name |
October |
|
|
'short' |
Abbreviated month |
Oct |
|
|
'narrow' |
Single character |
O |
|
|
day |
'numeric' |
Day of month |
23 |
|
'2-digit' |
Two-digit day |
23 |
|
|
weekday |
'long' |
Full weekday name |
Thursday |
|
'short' |
Abbreviated weekday |
Thu |
|
|
'narrow' |
Single character |
T |
|
|
TIME COMPONENTS |
|||
|
hour |
'numeric' |
Hour |
11 |
|
'2-digit' |
Two-digit hour |
11 |
|
|
minute |
'numeric' |
Minute |
6 |
|
'2-digit' |
Two-digit minute |
06 |
|
|
second |
'numeric' |
Second |
48 |
|
'2-digit' |
Two-digit second |
48 |
|
|
fractionalSecondDigits |
1, 2, 3 |
Milliseconds digits |
48.123 |
|
TIME SETTINGS |
|||
|
hour12 |
true |
12-hour clock |
11:06 AM |
|
false |
24-hour clock |
11:06 |
|
|
timeZone |
'America/New_York' |
Specific timezone |
Adjusts time |
|
'UTC' |
UTC timezone |
||
|
'Europe/London' |
Other timezones |
||
|
timeZoneName |
'short' |
Abbreviated timezone |
EDT |
|
'long' |
Full timezone name |
Eastern Daylight Time |
|
|
'shortOffset' |
Short offset |
GMT-4 |
|
|
'longOffset' |
Long offset |
GMT-04:00 |
|
|
'shortGeneric' |
Generic short |
ET |
|
|
'longGeneric' |
Generic long |
Eastern Time |
|
|
OTHER OPTIONS |
|||
|
era |
'long' |
Full era name |
Anno Domini |
|
'short' |
Abbreviated era |
AD |
|
|
'narrow' |
Single character |
A |
|
|
dayPeriod |
'narrow' |
AM/PM format |
AM |
|
'short' |
AM/PM format |
AM |
|
|
'long' |
AM/PM format |
AM |
|
|
calendar |
'gregory' |
Gregorian calendar |
Default |
|
numberingSystem |
'latn' |
Latin digits |
0123456789 |
|
PRESET STYLES |
|||
|
dateStyle |
'full' |
Complete date |
Thursday, October 23, 2025 |
|
'long' |
Long format |
October 23, 2025 |
|
|
'medium' |
Medium format |
Oct 23, 2025 |
|
|
'short' |
Short format |
10/23/2025 |
|
|
timeStyle |
'full' |
Complete time |
11:06:48 AM Eastern Daylight Time |
|
'long' |
Long format |
11:06:48 AM EDT |
|
|
'medium' |
Medium format |
11:06:48 AM |
|
|
'short' |
Short format |
11:06 AM |
JavaScript Date Library Function Reference
Constructor Methods
|
Method |
Description |
Example |
|
new Date() |
Current date/time |
new Date() |
|
new Date(milliseconds) |
From milliseconds since epoch |
new Date(1634980000000) |
|
new Date(dateString) |
From ISO string |
new Date("2025-10-23") |
|
new Date(year, month, day, hours, minutes, seconds, ms) |
From components |
new Date(2025, 9, 23) |
Static Methods
|
Method |
Description |
Returns |
|
Date.now() |
Current timestamp in milliseconds |
1634980000000 |
|
Date.parse() |
Parse date string to milliseconds |
1634980000000 |
|
Date.UTC() |
UTC timestamp from components |
1634980000000 |
Getter Methods: Local Time Getters
|
Method |
Description |
Range |
|
getFullYear() |
4-digit year |
1900+ |
|
getMonth() |
Month |
0-11 |
|
getDate() |
Day of month |
1-31 |
|
getDay() |
Day of week |
0-6 |
|
getHours() |
Hours |
0-23 |
|
getMinutes() |
Minutes |
0-59 |
|
getSeconds() |
Seconds |
0-59 |
|
getMilliseconds() |
Milliseconds |
0-999 |
|
getTime() |
Milliseconds since epoch |
0+ |
|
getTimezoneOffset() |
Timezone offset in minutes |
-720 to 720 |
UTC Getters
|
Method |
Description |
Range |
|
getUTCFullYear() |
UTC 4-digit year |
1900+ |
|
getUTCMonth() |
UTC month |
0-11 |
|
getUTCDate() |
UTC day of month |
1-31 |
|
getUTCDay() |
UTC day of week |
0-6 |
|
getUTCHours() |
UTC hours |
0-23 |
|
getUTCMinutes() |
UTC minutes |
0-59 |
|
getUTCSeconds() |
UTC seconds |
0-59 |
|
getUTCMilliseconds() |
UTC milliseconds |
0-999 |
Setter Methods
Local Time Setters
|
Method |
Description |
Parameters |
|
setFullYear() |
Set year |
year[, month, day] |
|
setMonth() |
Set month |
month[, day] |
|
setDate() |
Set day of month |
day |
|
setHours() |
Set hours |
hours[, min, sec, ms] |
|
setMinutes() |
Set minutes |
minutes[, sec, ms] |
|
setSeconds() |
Set seconds |
seconds[, ms] |
|
setMilliseconds() |
Set milliseconds |
ms |
|
setTime() |
Set time via milliseconds |
milliseconds |
UTC Setters
|
Method |
Description |
Parameters |
|
setUTCFullYear() |
Set UTC year |
year[, month, day] |
|
setUTCMonth() |
Set UTC month |
month[, day] |
|
setUTCDate() |
Set UTC day of month |
day |
|
setUTCHours() |
Set UTC hours |
hours[, min, sec, ms] |
|
setUTCMinutes() |
Set UTC minutes |
minutes[, sec, ms] |
|
setUTCSeconds() |
Set UTC seconds |
seconds[, ms] |
|
setUTCMilliseconds() |
Set UTC milliseconds |
ms |
Conversion Methods
|
Method |
Description |
Example Output |
|
toString() |
Full date string |
"Thu Oct 23 2025 11:06:48 GMT-0400 (EDT)" |
|
toDateString() |
Date portion only |
"Thu Oct 23 2025" |
|
toTimeString() |
Time portion only |
"11:06:48 GMT-0400 (EDT)" |
|
toISOString() |
ISO 8601 format |
"2025-10-23T15:06:48.000Z" |
|
toUTCString() |
UTC string |
"Thu, 23 Oct 2025 15:06:48 GMT" |
|
toGMTString() |
GMT string (deprecated) |
"Thu, 23 Oct 2025 15:06:48 GMT" |
|
toJSON() |
JSON string |
"2025-10-23T15:06:48.000Z" |
|
toLocaleString() |
Locale date/time |
"10/23/2025, 11:06:48 AM" |
|
toLocaleDateString() |
Locale date only |
"10/23/2025" |
|
toLocaleTimeString() |
Locale time only |
"11:06:48 AM" |
Value Methods
|
Method |
Description |
Returns |
|
valueOf() |
Primitive value |
Milliseconds (same as getTime()) |
JavaScript Variable Types (var, const, let)
There are 3 types of variables commonly used in javascript. The main difference with the let type it's block scope. If it's defined inside of a block it can't be accessed outside of the block. Let's look at each in more detail:
const
Variables defined with const cannot be Redeclared
Variables defined with const cannot be Reassigned
Variables defined with const have Block Scope
// INCORRECT - must be assigned a value when it's declared.const x; x = 1.999;
// INCORRECT - it cannot be reassigned a value
const x = 1.999;x = 8;
// IF defined inside of a block it has block scope. Look at example below:if( somecondition ){ const x = 9;}// x cannot be access here outside of the "block", curly brackets.
// Below are valid usage of const:
// Example 1:
if( condition )
{ const x = 8;
console.log(x);
}
// Example 2:
const x = 8;
if( condition )
{
console.log(x);
}
Javascript Spread Operator ...
The javascript spread operator ... is a convenient way to insert an array into a second array. Used mainly when defining the array data. Consider the following:
/**** * The x array is placed inside of noSpread as a child array inside. * noSpread array is now ['u', Array(2), 3, 7] ****/
let x = ['a', 2];
let noSpread = ['u', x, 3, 7];/***
* using the spread operator ...x
* the spread array is now ['u', 'a', 2, 5, 6]
***/let x = ['a', 2];let spread = ['u', ...x, 5, 6];
Defining a Javascript Function
How To Define a JavaScript Function
There are a few different ways to declare a function in Javascript applications. I’ve laid out 4 ways below so choose the method that best fits your use case! Function declarations are great for named functions, whereas arrow functions are excellent for callbacks and shorter functions.
Using Function Declaration
/** Function Declaration */
function functionName(parameters) {
// code to be executed
return value;
}
// Example
function greet(name) {
return "Hello, " + name + "!";
}
console.log(`My name is ${greet("Alice")}`); // "Hello, Alice!"
Using Function Expression
/** Function Expression */
const functionName = function(parameters) {
// code to be executed
return value;
};
// Example
const multiply = function(a, b) {
return a * b;
};
console.log(`5 * 3 = ${multiply(5, 3)}`); // 15
Using Arrow Functions (ES6)
/** Arrow Function (ES6) */
const functionName = (parameters) => {
// code to be executed
return value;
};
// Examples with different syntax
const square = (x) => {
return x * x;
};
console.log(`Square of 4: ${square(4)}`); // 16
// Implicit return (for single expressions)
const squareRoot = x => x ** 0.5;
console.log(`Square Root of 8: ${squareRoot(8)}`);
// Multiple parameters
const add = (a, b) => a + b;
console.log(`2 + 3 = ${add(2, 3)}`); // 5
// No parameters
const title = () => "Math";
console.log(`The page title is "${pageTitle()}"`);
Using the Function Constructor
/** 4. Function Constructor (less common) */
const functionName = new Function("parameters", "function body");
// Example
const divide = new Function("a", "b", "return a / b;");
console.log(divide(10, 2)); // 5
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
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();
});