Articles in the year 2018

In a couple of recent tweets, Caleb Porzio demonstrated an easy way to pass Javascript object properties to a child component without declaring a separate prop for each property.

Here's how it works. Let's say that we have a Javascript object with several properties in the data object of a Vue JS component:

data() {
    return {
        post: {
            id: 1,
            name: 'Prop destructuring in Vue Js',
            author: 'Carl Cassar'
        }
    };
}

Imagine that you want to pass this data to a child component. One way of doing it, is to declare a prop for each of the object's properties and pass each one through individually.

<post :id="post.id" :name="post.name" :author="post.author"> </post>

Whilst there is nothing wrong with this approach, it is also possible to pass through the whole object at once by using the v-bind directive.

<post v-bind="post"></post>

Behind the scenes, Vue will 'destructure' the post object and pass through each property to the 'post` component as a prop.

props: {
    id: Number,
    name: String,
    author: Object
}

As you can see, this still allows us to validate the prop and set a sensible default as we would normally.

In the interest of giving credit where credit is due, here's the original tweet with Caleb's great tip:

📒📚 In @vuejs, instead of passing a bunch of object properties into a component as props, you can use v-bind as kind of a "prop destructuring" pic.twitter.com/swZrNrmMou

— Caleb Porzio (@calebporzio) August 29, 2018

You can see all of the uses for the v-bind directive in the docs and follow @calebporzio on Twitter. He's been posting some great tips recently and is well worth following.

In a post called The Life Changing Magic of Tidying Up Code, Kent Beck outlines his philosophy on cleaning up code. The article results in a short list of easy-to-follow rules, which I'm sure he would agree are there to be broken.

1. If it’s hard, don’t do it
2. Start when you’re fresh and stop when you’re tired
3. Land each session’s work immediately
4. Two reds is a revert
5. Practice
6. Isolate tidying

What To Tidy is a follow-up post in which Kent goes on to describe specific patterns to look out for.

In his recent talk about Laravel Nova at Laracon US, Taylor Otwell used a nice little shortcut to reset his demo app during the presentation. To reset an app in our local environment, we need to do three things:

1. Drop the database.
2. Migrate the database.
3. Seed the database.

As of Laravel 5.5, we've been able to to use the following command to perform all three actions at once:

php artisan migrate:fresh --seed

That's still quite a lot to type if you are using this command over and over, so let's add a quick alias to our bashrc or zshrc:

alias mfs="php artisan migrate:fresh --seed"

Now you can simply type mfs to quickly refresh your application and reseed it with fresh data.

While I've got your attention, Taylor's talk is well worth watching. I always learn something new from his presentations. I love the way that he can abstract a concept to the point where thousands of developers can use it in their own projects.

There are many ways to test a value in php, some of which can produce confusing results. What’s more, Laravel also offers a couple of helpers which can help us test php values. We’ll go over each method in turn and find out how to avoid some common pitfalls along the way.

#Is Null

From the php documentation:

is_null() finds whether a variable is NULL.

In other words, is_null() returns:

• true if the value is null and
• false if the value is not null

is_null(null) // true
is_null(0) // false
is_null('')	// false
is_null([]) // false
is_null(true)	// false
is_null(false) // false
is_null(collect()) // false

#Is Set

From the php documentation:

isset() determines if a value is set and is not NULL.

Unlike other methods described in this post, isset() can take multiple values and returns true only if all the parameters are set. Also unlike other methods, isset() requires a variable to be passed and will throw an error if you try to pass a value directly.

isset('value') // error

isset($unset)	// false

$value = null
isset($value)	// false

$value = 0
isset($value)	// true

$value = ''
isset($value)	// true

$value = []
isset($value)	// true

$value = true
isset($value)	// true

$value = false
isset($value)	// true

$value = collect()
isset($value)	// true

Notice that isset() returns false if null is passed, which can lead to some confusing results if you wanted to check whether a variable was initialised.

#Empty

From the php documentation:

empty() determines whether a variable is empty.

empty() is a helper that is logically equivalent to !isset($var) || $var == false

empty(null) // true
empty(0) // true
empty('') // true
empty([]) // true
empty(true) // false
empty(false) // true	
empty(collect()) // false 

The empty() function returns a couple of counterintuitive results, notably for 0, true and false. Because empty() performs a == check, values that are logically equivalent to false are treated as ‘empty’. This can be confusing since you might think that empty implies that the method will return true if a variable contains a value, whereas this is only the case if that value is also falsey.

Another potential pitfall is the way that empty deals with arrays and collections (or other iterable objects). Whereas an array with no items is treated as ‘empty’ (true), a collection with no items in it is considered ‘not empty’ (false).

#Blank

Laravel includes a helper method called blank.

blank(null) // true
blank(0) // false
blank('') // true
blank([]) // true
blank(true) // false
blank(false) // false
blank(collect()) // true
blank($unset) // error

This method tries to check if the value is truthy in a more intuitive way. One thing to note is that unlike empty() it will not check if the value is set and will throw an error if you try to pass an unset variable. On a positive note, it treats arrays and collections in the same way.

Blank makes the following checks before falling back to the empty() method:

• Check if the value is null
• Check if the value is an empty string
• Check if the value is numeric or boolean
• Check if the value is an countable instance

It might be helpful to see the method signature for the blank() helper.

#Filled

Laravel also comes with a helper method called filled, which is the logical opposite of blank().

filled(null) // false
filled(0) // true
filled('') // false
filled([]) // false
filled(true) // true
filled(false) // true
filled(collect())	// false
filled($unset) // error

Looking into the code for filled() shows us that it is literally equivalent to !blank().

As you can see, it can be hard to know which tool to use. None of the methods described above are better that the other. It’s simply a case of using the right method for the right use case.

Here’s a handy table you can use to compare the results from each method.