JavaScript is always improving, and every year, new features are added to make coding easier and more efficient. These updates help developers write cleaner code and work faster. If you want to stay ahead as a developer, it's important to learn about the latest JavaScript features.
In this article, we’ll talk about some of the new tools and methods available in JavaScript, like findLast, toReversed, toSorted, and more. These features allow you to manipulate arrays and data in smarter ways without changing your original data. We’ll look at how each one works, and I’ll show you examples, explaining how they can make your code better.
Table of Contents
Array Methods in JavaScript
JavaScript has a variety of methods that make working with arrays easier. Arrays are lists of items, and you’ll often need to search, sort, or update these lists. Older methods like push(), pop(), map(), and filter() have been useful, but they can sometimes change the original data, which isn't always what you want.
Newer JavaScript methods offer better options to handle arrays, especially when you need to keep the original data unchanged. These new methods make coding more reliable and cleaner.
The latest JavaScript methods provide more ways to work with arrays without changing the original list. These methods, like findLast, toSorted, and toReversed, create a new array or give you the result directly, leaving your original array untouched.
findLast: Locate the Last Matching Element
When working with arrays, you might want to search for an item that matches certain conditions. The older find() method helps you get the first matching item, but what if you need the last match instead?
This is where findLast() comes in. It searches the array starting from the end and gives you the last item that meets your condition, without manually reversing the array.
Syntax and Parameters of findLast
The findLast() method works almost like find(), but it looks for the last match. Here’s the basic syntax:
array.findLast(callback(element, index, array), thisArg);
callback: A function that checks each item in the array.
element: The current item being checked.
index: The index of the current item.
array: The array being processed.
thisArg: Optional. It can be used as
thisinside the callback.
Practical Examples of Using findLast
Let’s look at a simple example. Imagine you have an array of numbers, and you want to find the last number greater than 5.
const numbers = [2, 7, 4, 9, 3];
// Find the last number greater than 5
const lastNumberOver5 = numbers.findLast(num => num > 5);
console.log(lastNumberOver5); // Output: 9
In this example, findLast() starts searching from the end of the array and returns the last number that is greater than 5.
Finding the Last Occurrence in Arrays
You can use findLast() to get the last matching item, which can be helpful when there are multiple matches in an array. Let’s say you want to find the last even number in an array:
const numbers = [1, 4, 6, 8, 3, 6];
// Find the last even number
const lastEvenNumber = numbers.findLast(num => num % 2 === 0);
console.log(lastEvenNumber); // Output: 6
Comparison with find()
The key difference between find() and findLast() is the direction in which they search. find() starts from the beginning of the array and stops at the first match, while findLast() starts from the end and returns the last match.
Here’s a comparison:
const numbers = [3, 5, 7, 9, 5];
// Using find()
const first5 = numbers.find(num => num === 5);
console.log(first5); // Output: 5 (first match)
// Using findLast()
const last5 = numbers.findLast(num => num === 5);
console.log(last5); // Output: 5 (last match)
The findLast() method is particularly useful in scenarios where the order of items matters, such as:
Retrieving the last message in a chat app that meets a certain condition.
Finding the last error in a list of system logs.
Getting the last transaction above a certain amount in a financial app.
findLastIndex: Pinpoint the Index of the Last Match
Sometimes, you don’t just need the last matching item in an array, but you also want its position. This is where findLastIndex() helps. It works like findLast(), but instead of returning the value, it returns the index of the last element that meets your condition. This makes it easier to track the location of that item in the array.
Syntax and Key Parameters
The syntax of findLastIndex() is simple and looks a lot like findLast():
array.findLastIndex(callback(element, index, array), thisArg);
callback: A function that runs for each element in the array.
element: The current item being checked.
index: The position of the current item in the array.
array: The array being processed.
thisArg: Optional. Used as
thisinside the callback.
If no element meets the condition, findLastIndex() returns -1.
Practical Examples of findLastIndex in Action
Let’s look at an example. Say you have an array of numbers and want to find the index of the last number greater than 5.
const numbers = [2, 7, 4, 9, 3];
// Find the index of the last number greater than 5
const lastIndexOver5 = numbers.findLastIndex(num => num > 5);
console.log(lastIndexOver5); // Output: 3 (index of 9)
In this case, findLastIndex() returns 3, which is the position of 9, the last number greater than 5 in the array.
Retrieving the Last Index Matching a Condition
If you need to pinpoint the position of the last element that fits a specific condition, findLastIndex() is the right tool. Here’s another example, finding the last even number in an array:
const numbers = [1, 4, 6, 8, 3, 6];
// Find the index of the last even number
const lastEvenIndex = numbers.findLastIndex(num => num % 2 === 0);
console.log(lastEvenIndex); // Output: 5 (index of the last 6)
In this case, the index of the last even number is 5.
Contrast with findIndex
The main difference between findIndex() and findLastIndex() is the direction they search. findIndex() starts from the beginning of the array and stops at the first match. findLastIndex() works in reverse, starting from the end and returning the last match.
Here’s a quick comparison:
const numbers = [3, 5, 7, 9, 5];
// Using findIndex()
const first5Index = numbers.findIndex(num => num === 5);
console.log(first5Index); // Output: 1 (first match)
// Using findLastIndex()
const last5Index = numbers.findLastIndex(num => num === 5);
console.log(last5Index); // Output: 4 (last match)
Performance Considerations for Large Data Sets
In small arrays, the performance difference between findIndex() and findLastIndex() might not be noticeable. But with large datasets, the difference can matter. Since findLastIndex() starts from the end of the array, it may be more efficient if you expect the match to be near the end. This can save time compared to scanning from the start using findIndex().
For example, when working with a large log of events, using findLastIndex() could quickly find the most recent event that meets a condition:
const events = new Array(100000).fill(0).map((_, i) => i + 1);
// Find the index of the last number divisible by 5000
const lastDivisibleBy5000 = events.findLastIndex(num => num % 5000 === 0);
console.log(lastDivisibleBy5000); // Output: 99999 (index of 100000)
In large datasets like this, using findLastIndex() helps avoid unnecessary searches when you’re only interested in the most recent or last occurrence.
toReversed: Reverse Without Changing Original Arrays
In JavaScript, the reverse() method is used to flip the order of elements in an array. But it changes the original array. This can cause problems if you want to keep the original data intact. The toReversed() method fixes this issue by allowing you to reverse an array without affecting the original.
Syntax and Usage of toReversed
The toReversed() method is simple to use. It creates a reversed version of the array without modifying the original one. Here’s the basic syntax:
const newArray = array.toReversed();
array: The array you want to reverse.
newArray: A new array with the reversed elements.
Examples of Reversing Arrays Safely
Let’s look at an example where you want to reverse an array but still need to keep the original version:
const numbers = [1, 2, 3, 4, 5];
// Reverse the array without changing the original
const reversedNumbers = numbers.toReversed();
console.log(reversedNumbers); // Output: [5, 4, 3, 2, 1]
console.log(numbers); // Output: [1, 2, 3, 4, 5]
In this case, the original numbers array stays the same, and toReversed() returns a new array with the elements flipped.
Avoiding Side Effects with toReversed
One of the biggest benefits of toReversed() is that it avoids side effects. The traditional reverse() method directly changes the original array, which can lead to bugs if the original data is needed elsewhere. With toReversed(), the original array remains unchanged, so you don’t have to worry about unexpected changes.
const letters = ['a', 'b', 'c', 'd'];
// Using toReversed to avoid side effects
const reversedLetters = letters.toReversed();
console.log(reversedLetters); // Output: ['d', 'c', 'b', 'a']
console.log(letters); // Output: ['a', 'b', 'c', 'd']
As you can see, the original letters array is still in its original form after calling toReversed().
Comparison with reverse Method
The reverse() method directly modifies the array, while toReversed() leaves the original unchanged. Here’s a quick comparison:
const nums = [10, 20, 30, 40];
// Using reverse()
const reversedNums1 = nums.reverse();
console.log(reversedNums1); // Output: [40, 30, 20, 10]
console.log(nums); // Output: [40, 30, 20, 10] (Original array changed)
// Using toReversed()
const reversedNums2 = nums.toReversed();
console.log(reversedNums2); // Output: [10, 20, 30, 40]
console.log(nums); // Output: [40, 30, 20, 10] (Original stays as it was after reverse)
As shown, reverse() changes the array itself, but toReversed() doesn’t touch the original array.
How toReversed Enhances Functional Programming Practices
In functional programming, the idea is to avoid changing data directly. Instead, new values are returned from functions, leaving the original data untouched.
toReversed() fits perfectly into this concept, allowing arrays to be reversed without altering the original data. This leads to cleaner and safer code because you reduce the risk of accidentally changing something.
For example, in a functional programming setup, you might want to reverse an array of scores for display purposes without changing the actual scores:
const scores = [95, 87, 75, 60];
// Reverse the scores for display purposes without modifying the original
const displayedScores = scores.toReversed();
console.log(displayedScores); // Output: [60, 75, 87, 95]
console.log(scores); // Output: [95, 87, 75, 60] (Original scores intact)
toSorted: Immutable Sorting for Cleaner Code
JavaScript has had the sort() method for a long time, which allows you to arrange elements of an array. The issue is that sort() changes the original array, which can lead to unintended problems when the original data is still needed elsewhere.
To fix this, JavaScript introduced toSorted(). This method lets you sort arrays without changing the original, making the code cleaner and more reliable.
Syntax and Parameters
The syntax for toSorted() is straightforward, similar to sort(), but it doesn't modify the original array:
const newArray = array.toSorted(compareFunction);
array: The array you want to sort.
compareFunction: Optional. A function that defines how the elements should be sorted. If not provided, the array elements are converted to strings and sorted in ascending order.
Use Cases of toSorted
Let’s say you have a list of students and want to sort them based on their scores, but you need the original list untouched:
const students = [
{ name: 'Dave', score: 85 },
{ name: 'Alexa', score: 92 },
{ name: 'Katie', score: 78 }
];
// Sort students without changing the original array
const sortedStudents = students.toSorted((a, b) => b.score - a.score);
console.log(sortedStudents);
// Output: [{name: 'Katie', score: 92}, {name: 'Dave', score: 85}, {name: 'Katie', score: 78}]
console.log(students);
// Output (unchanged): [{name: 'Dave', score: 85}, {name: 'Alexa', score: 92}, {name: 'Katie', score: 78}]
This allows you to sort the students based on their scores without affecting the original data, which might be useful elsewhere in the code.
Sorting Arrays Without Mutating Original Data
toSorted() provides a safe way to handle sorting without the risk of accidentally changing the original array. This is especially helpful when working on large projects where data might be used in different parts of the code.
Here’s an example where you sort a simple list of numbers:
const numbers = [5, 2, 9, 1, 7];
// Sort the numbers without changing the original array
const sortedNumbers = numbers.toSorted();
console.log(sortedNumbers); // Output: [1, 2, 5, 7, 9]
console.log(numbers); // Output (unchanged): [5, 2, 9, 1, 7]
Comparison with the Traditional sort Method
The traditional sort() method sorts an array but changes the original, which can cause problems if the original array is needed elsewhere.
const numbers = [3, 1, 4, 2];
// Using sort()
const sortedNumbers1 = numbers.sort();
console.log(sortedNumbers1); // Output: [1, 2, 3, 4]
console.log(numbers); // Output (original array changed): [1, 2, 3, 4]
// Using toSorted()
const sortedNumbers2 = numbers.toSorted();
console.log(sortedNumbers2); // Output: [1, 2, 3, 4]
console.log(numbers); // Output (unchanged): [3, 1, 4, 2]
As you can see, sort() changes the original array, but toSorted() keeps it untouched.
Performance and Best Practices
For smaller arrays, performance between sort() and toSorted() will be almost the same. But for larger datasets or when sorting is frequent, toSorted() can help avoid side effects and make the code safer.
Using toSorted() means you can safely pass the original array to other parts of the code without worrying about unexpected changes.
To get the best performance, make sure to always use a proper compare function, especially for complex sorting, like sorting objects:
const people = [
{ name: 'Rash', age: 30 },
{ name: 'Josh', age: 25 },
{ name: 'Sammy', age: 40 }
];
// Sort people by age without mutating the original array
const sortedPeople = people.toSorted((a, b) => a.age - b.age);
console.log(sortedPeople);
// Output: [{name: 'Josh', age: 25}, {name: 'Rash', age: 30}, {name: 'Sammy', age: 40}]
Using toSorted() improves the readability of your code and helps avoid unintended side effects, especially when working with important data.
toSpliced: Create New Arrays by Splicing Without Mutation
The splice() method in JavaScript has been useful for adding, removing, or replacing elements within an array. But it changes the original array, which can lead to unexpected results if you want to keep the original data.
To solve this, toSpliced() was introduced. It works like splice(), but without changing the original array, allowing for a safer and cleaner approach.
Syntax and Practical Usage
Here’s how the toSpliced() method works. It creates a new array after splicing, leaving the original one unchanged.
const newArray = array.toSpliced(start, deleteCount, item1, item2, ...);
start: The index at which to start modifying the array.
deleteCount: The number of items to remove from the array (optional).
item1, item2, ...: The items to add at the start index (optional).
Examples: Splicing Arrays in an Immutable Way
Let’s explore a practical example where you want to remove and replace elements from an array but keep the original intact:
const fruits = ['apple', 'banana', 'cherry', 'date'];
// Create a new array by removing 'banana' and adding 'blueberry' without changing the original
const newFruits = fruits.toSpliced(1, 1, 'blueberry');
console.log(newFruits); // Output: ['apple', 'blueberry', 'cherry', 'date']
console.log(fruits); // Output: ['apple', 'banana', 'cherry', 'date']
Here, toSpliced() removes 'banana' and adds 'blueberry' at the same position, but the original fruits array stays unchanged.
Comparison with the Traditional splice Method
The key difference between splice() and toSpliced() is that splice() changes the original array, while toSpliced() leaves it untouched and returns a new array.
const numbers = [1, 2, 3, 4];
// Using splice()
const splicedNumbers = numbers.splice(1, 2, 10, 20);
console.log(splicedNumbers); // Output: [2, 3] (Removed elements)
console.log(numbers); // Output: [1, 10, 20, 4] (Original array changed)
// Using toSpliced()
const newNumbers = numbers.toSpliced(1, 2, 5, 6);
console.log(newNumbers); // Output: [1, 5, 6, 4]
console.log(numbers); // Output: [1, 10, 20, 4] (Original array unchanged)
splice() modifies the original array, but toSpliced() does not, giving you more control and avoiding unwanted changes to data.
Use Cases for Functional Programming
toSpliced() fits well with functional programming, which favors avoiding changes to existing data. For example, in applications where you often manipulate arrays (like lists of users or products), toSpliced() helps keep the original data intact.
const users = ['Dave', 'Alexa', 'Katie'];
// Remove 'Bob' and add 'Dan' without modifying the original array
const updatedUsers = users.toSpliced(1, 1, 'Dan');
console.log(updatedUsers); // Output: ['Dave', 'Dan', 'Katie']
console.log(users); // Output: ['Dave', 'Alexa', 'Katie']
This method makes it easier to manage and work with arrays in situations where the original data needs to be preserved.
Avoiding Pitfalls with toSpliced
The main advantage of toSpliced() is that it avoids unintended changes to the original array. It reduces the chances of bugs caused by data being accidentally modified.
But it’s important to note that creating a new array with toSpliced() means that the old array is not directly updated, so you’ll need to assign the result to a new variable if you want to use the modified data.
const colors = ['red', 'green', 'blue'];
// Create a new array that adds 'yellow' at index 1
const newColors = colors.toSpliced(1, 0, 'yellow');
console.log(newColors); // Output: ['red', 'yellow', 'green', 'blue']
console.log(colors); // Output: ['red', 'green', 'blue'] (Original unchanged)
with: Modify Array Elements by Index
The with method is a new and powerful tool introduced in JavaScript to help replace elements in an array without changing the original array.
This is helpful when you need to update specific items without affecting the rest of the data, keeping your original array intact. It promotes safer and cleaner code, especially when working with large datasets or in functional programming styles.
Syntax and Key Parameters
The with method allows you to create a new array where one element at a specific index is replaced.
const newArray = array.with(index, newValue);
index: The position of the element you want to replace.
newValue: The value to insert at the given index.
Examples of Using with for Element Replacement
Let’s explore a simple example where you want to replace an item at a specific position:
const fruits = ['apple', 'banana', 'cherry'];
// Replace 'banana' with 'blueberry' at index 1
const newFruits = fruits.with(1, 'blueberry');
console.log(newFruits); // Output: ['apple', 'blueberry', 'cherry']
console.log(fruits); // Output: ['apple', 'banana', 'cherry']
In this example, we replaced 'banana' with 'blueberry', but the original fruits array stays the same, which is very useful to avoid side effects in your code.
Replacing Elements in Arrays While Maintaining Immutability
One of the key strengths of the with method is that it does not change the original array. This helps maintain immutability, which is often needed when handling data in larger applications. You can confidently replace elements without worrying about accidental changes to the original data.
const numbers = [10, 20, 30, 40];
// Replace the number at index 2 (30) with 35
const updatedNumbers = numbers.with(2, 35);
console.log(updatedNumbers); // Output: [10, 20, 35, 40]
console.log(numbers); // Output: [10, 20, 30, 40] (Original unchanged)
This makes the with method an ideal choice when you need to update data but still want to reference the original array elsewhere in your code.
Applications of the with Method
The with method can be applied in many scenarios, such as updating user profiles, modifying a list of items, or working with any data that requires selective updates. For example, when dealing with a table of users, you can replace a specific user’s data without affecting the entire dataset.
const users = ['Dave', 'Alexa', 'Katie'];
// Update Bob's name to 'Dan'
const updatedUsers = users.with(1, 'Dan');
console.log(updatedUsers); // Output: ['Dave', 'Dan', 'Katie']
console.log(users); // Output: ['Dave', 'Alexa', 'Katie'] (Original unchanged)
This method helps avoid confusion that can arise from unwanted changes to data when updating specific elements in an array.
with vs Traditional Methods for Element Replacement
Before the introduction of with, replacing elements in arrays required methods like splice() or manual approaches, both of which would modify the original array:
const colors = ['red', 'green', 'blue'];
// Traditional method (using mutation)
colors.splice(1, 1, 'yellow');
console.log(colors); // Output: ['red', 'yellow', 'blue'] (Original array changed)
With the new with method, you can avoid this problem:
const colors = ['red', 'green', 'blue'];
// Using `with` method
const newColors = colors.with(1, 'yellow');
console.log(newColors); // Output: ['red', 'yellow', 'blue']
console.log(colors); // Output: ['red', 'green', 'blue'] (Original unchanged)
The with method ensures the original data remains intact which makes it a better option for situations where immutability is important.
Combining New JavaScript Methods for Advanced Data Manipulation
The new JavaScript methods like findLast, toSorted, and with provide powerful tools for managing and transforming data. When used together, they allow you to create complex data operations in a simple and readable way.
Let’s look at how you can combine these methods to handle data efficiently and write clean, effective code.
How to Chain Methods like findLast, toSorted, and with
Chaining methods in JavaScript lets you apply multiple transformations to your data in a single flow.
For example, you might want to sort an array, find the last matching element, and then replace it with a new value. Here’s how you can do that using toSorted, findLast, and with:
const numbers = [20, 5, 15, 30, 10];
// Chain methods to sort, find the last element greater than 10, and replace it
const result = numbers
.toSorted((a, b) => a - b) // Sort the array in ascending order
.with(numbers.findLastIndex(num => num > 10), 100); // Find and replace the last match
console.log(result); // Output: [5, 10, 15, 20, 100]
In this example:
toSorted()arranges the array in ascending order without changing the original array.findLastIndex()finds the last number greater than 10.with()replaces that number (which is 30) with 100, without modifying the original array.
This combination is useful when working with complex data workflows and ensures that the original data remains unchanged.
Creating Complex Data Transformations with Ease
The real power of these methods shines when you want to perform multiple actions on arrays in a readable and organized way. Here’s another example where we combine sorting, filtering, and replacing data all in one flow:
const students = [
{ name: 'Dave', score: 85 },
{ name: 'Alexa', score: 75 },
{ name: 'Katoe', score: 90 }
];
// Chain methods to sort, find the last student with a score above 80, and update their score
const updatedStudents = students
.toSorted((a, b) => b.score - a.score) // Sort students by score (descending)
.with(
students.findLastIndex(student => student.score > 80),
{ ...students.findLast(student => student.score > 80), score: 95 }
);
console.log(updatedStudents);
In this case:
toSorted()sorts students based on their scores from highest to lowest.findLastIndex()identifies the last student who scored above 80.with()creates a new array with that student’s score updated to 95.
The flexibility of combining these methods means you can manage even complex data structures easily without compromising readability or changing the original data.
Best Practices for Writing Clean, Efficient Code with These Methods
To write clean and efficient code, consider the following tips when using these new JavaScript methods:
Avoid Mutating the Original Data: Use methods like
toSorted,toReversed, andwiththat do not change the original array. This ensures that your data remains consistent throughout your code.Use Chaining for Readability: Chain methods when performing multiple transformations. This keeps your code concise and easier to follow.
Use Arrow Functions: Short arrow functions help reduce the complexity of your code. For instance:
const sortedNumbers = numbers.toSorted((a, b) => a - b);Combine Methods Thoughtfully: Make sure the methods you chain together logically follow each other. For example, it makes sense to sort data first before finding the last element that matches a condition.
Handle Large Datasets Carefully: For very large arrays, consider performance implications. Methods like
findLastandtoSortedmight take time on bigger datasets, so always test your code’s performance with realistic data sizes.
Backward Compatibility and Polyfills
As new JavaScript features are added, not all browsers will support them right away. It’s important to make sure your code still works on older browsers without breaking. Let's talk about how you can handle this and introduce polyfills to fill the gap when using the latest features.
How to Ensure Backward Compatibility with Older Browsers
To make sure your code works smoothly on older browsers that don’t support new JavaScript methods like findLast, toSorted, or with, you can add checks to see if a feature is available before using it. This way, the code doesn’t fail on unsupported browsers.
Here’s an example:
if (Array.prototype.findLast) {
// Use the findLast method
const arr = [1, 2, 3, 4, 5];
const lastOdd = arr.findLast(num => num % 2 !== 0);
console.log(lastOdd); // Output: 5
} else {
// Fallback code for older browsers
console.log('findLast is not supported');
}
This example checks if findLast exists. If it doesn’t, you can run a fallback or show a message. This approach helps maintain backward compatibility.
Overview of Polyfills for New JavaScript Features
A polyfill is a piece of code that adds support for new JavaScript features on browsers that don’t have them yet. It basically provides an alternative implementation of the feature.
For example, let’s create a polyfill for findLast:
if (!Array.prototype.findLast) {
Array.prototype.findLast = function(callback) {
for (let i = this.length - 1; i >= 0; i--) {
if (callback(this[i], i, this)) {
return this[i];
}
}
return undefined;
};
}
This polyfill adds the findLast method to arrays that don’t support it. Now, even older browsers can run code that uses this feature.
Polyfills for common methods are available on sites like MDN or through libraries like core-js that cover many modern JavaScript features.
Tools and Resources to Test Browser Support
Before using new features, it’s helpful to check how widely supported they are across different browsers. Here are some tools that can assist:
Can I Use: A popular website that shows browser compatibility for new JavaScript features. You can search for methods like
toSortedorfindLastto see which browsers support them.Example: Can I Use: findLast
Babel: A JavaScript compiler that converts new JavaScript code into older versions that work on older browsers. Babel can automatically add polyfills for unsupported features.
Example usage with Babel:
npm install --save-dev @babel/preset-envThen configure Babel to use the preset:
{ "presets": ["@babel/preset-env"] }Polyfill.io: A service that automatically serves the necessary polyfills based on the user's browser.
To use it, simply add this script to your HTML:
<script src="https://polyfill.io/v3/polyfill.min.js"></script>
This script automatically adds only the polyfills needed for the browser loading the page, making it an easy way to handle backward compatibility.
Conclusion
We’ve explored some of the latest JavaScript features, including methods like findLast, findLastIndex, toReversed, toSorted, toSpliced, and with.
These new additions bring more flexibility and efficiency to working with arrays. They help avoid unwanted changes to the original data and make code cleaner and easier to follow. For example, toSorted allows sorting without altering the original array, and findLast makes it simpler to locate the last matching element in a list.
Each of these methods saves time and reduces complexity when managing and transforming data.
As JavaScript continues to evolve, it’s important to start using these methods in future projects. They can simplify complex data manipulation tasks and make your code easier to maintain. Try adding these methods to your current codebase and explore how they can improve the way you write and manage JavaScript.
The next time you work with arrays, consider using toSorted for sorting, findLast for searching, or with for replacing elements without changing the original data. These small adjustments can have a big impact on the quality of your code.
If you have any questions or suggestions, feel free to reach out on LinkedIn. If you enjoyed this content, consider buying me a coffee to support the creation of more developer-friendly contents.