#1: Reorder added to Laravel 7, ol attributes, and more

Welcome to the 1st Andy's Web Dev Tips newsletter! Here's a few things from this week:

A reorder method was added to Laravel 7

Let’s say that you decide to use order on a relationship in one of your model classes. With this new reorder method, you can modify that without having to fire off a second query! Check out the example code in this screenshot below:

Credit for the above goes to @reinink

Did you know that <ol> has some fun attributes?

Ah, <ol>, the consistent runner-up for list elements. I was extremely surprised to find out this week that there’s a slew of not-well-known attributes that you can add in to modify its behavior.

You can change which number you’d like to start with by using the start attribute:

<ol start="5">
  <li>This will be 5</li>
  <li>This will be 6</li>
  <li>This will be 7</li>
</ol>

You can also completely reverse the order by adding in reversed:

<ol reversed>
  <li>This will be 3</li>
  <li>This will be 2</li>
  <li>This will be 1</li>
</ol>

Credit for the above goes to @sulco

Sum the property values of an array of objects in Vue

Let’s say that you have an array of objects in a Vue component, and you want the sum of a particular property across all of those objects. This might have you thinking about looping over each object and adding that property value to a variable, but I found an incredibly easy way to do this using a single line of JavaScript.

Check out this screenshot of an example component below:

What’s happening here is in two parts:

1. The .map() method is going over each object in the array, and returning just the value property. We end up with an array of values: [10, 25].

2. The .reduce() method takes that array, and performs some calculation in it to get back a single, final value. a represents the final value returned, and b represents the current value in the array. We’re just adding those values together.

The result is a single value, comprised of the sum of all of the object properties that we specified.

Getting started with Amazon S3 storage in Laravel

In case you missed it, last month I published a video showing you how to get started attaching an Amazon S3 bucket to your Laravel application, and using it as storage for images, documents, and other files.

In addition to the programming aspect, I also go over how to create an S3 bucket in AWS, handle permissions, and provision credentials for it to use in your application.

That’s it for this week! If you have any questions about the above, or have something you’d like me to check out, please feel free to let me know on Twitter.