DEV Community: Wilbur Powery

Easily Upgrade to PHP 7.3

Wilbur Powery — Sat, 22 Dec 2018 00:00:00 +0000

First published on my website.

PHP 7.3 has been out for a couple of weeks now and if you're interested in upgrading, the process is super simple.

Note: This small guide if meant for Mac OS users. If you're a Windows user, a quick google search should help you out!

Let's update everything

To pull install or update any applications or services, I use a Mac OS package manager called Homebrew. Before we go about upgrading our PHP installation, lets' quickly run a Homebrew commands to update our formulae and Homebrew itself.

$ brew update

Upgrading PHP

Now that our formulae is updated, we can proceed to upgrade our PHP installation with the latest version available on Homebrew.

$ brew upgrade php

After the upgrade completes, you can open a new tab in your terminal and check your PHP version with php -v. If all went well, you should see something like this:

PHP 7.3.0 (cli) (built: Dec  7 2018 11:00:11) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.3.0-dev, Copyright (c) 1998-2018 Zend Technologies
    with Zend OPcache v7.3.0, Copyright (c) 1999-2018, by Zend Technologies

In only a couple of minutes, you're already upgraded to the latest version of PHP. Keep in mind that some packages or services you're using in your system or applications might not be updated just yet to work on PHP 7.3.

Bonus for Laravel users

If you're a Laravel user you're more than likely using Laravel Valet. In order to get Valet working on PHP 7.3, you simply need to update it to the latest version released. Just do a composer global update to update all your globally installed Composer packages and then just do a valet install.

Running valet install again is necesarry to configure the installation to work with your new PHP version.

Warning: There are some known bugs with PHP 7.3 and Opcache when queueing emails in the Laravel framework so I encourage you to keep an eye on the issues in the Laravel repository on Github.

Work Hard / Play Harder

Wilbur Powery — Thu, 22 Nov 2018 00:17:06 +0000

Want something? Work for it. Nobody owes you anything!

Easily use UUIDs in Laravel

Wilbur Powery — Mon, 29 Oct 2018 00:00:00 +0000

First published on my website

What are UUIDs?

UUID stands for Universal Unique Identifier. It's a 128-bit number used to uniquely identify some object or in our case, a record in our database.

I won't go into depth about the pros or cons of UUIDs when compared to a regular auto incrementing ID, that's an entire blog post of its own. What I will do, is show you how easy it is to use UUIDs in your Laravel application if you wish too.

Prepare your migration

The first step of using UUIDs in your database is setting up your column to be of a specific type. By default, a Laravel migration includes a $table->primary('id'); column in each migration you create.

Using UUIDs is as simple as updating our migration to use the ->uuid() method that Laravel provides out of the box for us. For example, let's say we're creating a migration to describe the schema of a Post.

Schema::create('posts', function (Blueprint $table) {
    $table->uuid('id')->primary();
    $table->string('title');
    $table->text('body');
    $table->timestamps();
});

The important line you should notice is this one: $table->uuid('id')->primary();. Notice we are using the uuid() method instead of the common increments() method. As you can see, the uuid() method specifies the column should be a UUID equivalent column and we also specify that it should be the primary key on the table.

Creating the UUID

If you run php artisan migrate, and try to create a new record using something like a factory, or manually creating it, you'll run into an error saying the id column cannot be null.

When using the primary() method on our migrations, Laravel will notice it's an auto-incrementing column and whip it up for us. But, since we switched over to using UUIDs, we'll need to create the ID ourselves.

Use Eloquent Model Events

Since you're using Laravel, I imagine you would also be using Eloquent to easily interact with your database.

Eloquent has what are known as Model Events. In total, it fires a total of 11 events in different scenarios. You have the following events:

retrieved
creating
created
updating
updated
saving
saved
deleting
deleted
restoring
restored.

If you want to learn more about Eloquent Events, you can find their documentation here.

Now, back to creating our UUIDs. Let's take a look at how your Post model could look like:

class Post extends Model
{
    protected $guarded = []; // YOLO

    protected static function boot()
    {
        parent::boot();

        static::creating(function ($post) {
            $post->{$post->getKeyName()} = (string) Str::uuid();
        });
    }

    public function getIncrementing()
    {
        return false;
    }

    public function getKeyType()
    {
        return 'string';
    }
}

Our Model has 3 methods in it. The boot method is where we can hook into our model and listen for any Eloquent events. The getIncrementing method is used by Eloquent to now if the IDs on the table are incrementing. Remember we are using UUIDs so we set auto incrementing to false.
Lastly, the getKeyType method just specifies that the IDs on the table should be stored as strings.

In our boot method, we are listening for the creating Eloquent event. This even is fired just before the record is actually stored in the database. We hook into this event, and use the uuid() method provided by the Str class in Laravel.

A while ago, people might have installed a package with Composer in order to generate a UUID but you can generate them easily using the uuid() method provided by the class.

Easy as that, you can use UUIDs in Laravel.

As I final note, I'll usually have a PHP trait called UsesUuid where I'll have the logic above. That way I wouldn't repeated the code on every model I wanted to use UUIDs.

This is what the UsesUuid trait would look like:

<?php

namespace App\Models\Concerns;

use Illuminate\Support\Str;

trait UsesUuid
{
    protected static function bootUsesUuid()
    {
        static::creating(function ($model) {
            if (! $model->getKey()) {
                $model->{$model->getKeyName()} = (string) Str::uuid();
            }
        });
    }

    public function getIncrementing()
    {
        return false;
    }

    public function getKeyType()
    {
        return 'string';
    }
}

Notice how everything is more generalized and not tied to a unique model.

Now, in any model that as the correct column in its migration you can simply use the UsesUuid trait like so:

class Post extends Model
{
  use App\Models\Concerns\UsesUuid;

  protected $guarded = []; // YOLO
}

That's it. In just a few simple steps you got UUIDs working in your Laravel app.

My Personal Website | Blog

Wilbur Powery — Thu, 30 Aug 2018 15:34:27 +0000

The little I know about design came from following Steve Schoger on Twitter.

https://twitter.com/steveschoger

My site => https://wilburpowery.co/

I'd like to know your thoughts on my site 🤗

Async + Await refactor, which do you like best?

Wilbur Powery — Fri, 18 May 2018 18:08:19 +0000

Async + Await is sooo good once you get the hang of it. Just refactored this piece of code and removed a lot of indentation levels. Removing indentation levels is always good. #javascript #es6 pic.twitter.com/zfFEDyJU0B
— Wilbur Powery (@wilburpowery ) May 18, 2018

Resolve classes from Laravel's Container

Wilbur Powery — Thu, 17 May 2018 13:08:22 +0000

First published on my website

Laravel's Container

Laravel's Container is without a doubt one of the most powerful tools provided by the framework. If you've ever used Laravel before, you've used the service Container without even knowing it. Behind the scenes Laravel resolves all your controller classes from the Container, that's the reason you can type hint any class and get an instance really easily.

Resolving a class from the Container

Resolving a class from the Container is very easy with Laravel and there is actually a few ways it can be done. Choose whichever you like best, and stick with it.

// Using the App Facade
App::make('Slack\Api');

// Using the app helper function
app('Slack\Api');

// Using the resolve helper function
resolve('Slack\Client');

<?php

namespace Slack;

class Api
{
    public function __construct(Class $dependency)
    {
        $this->dependency = $dependency;
    }
}

The Container will notice there's a type hint in our constructor and it will try to resolve that dependency and pass it into the class.

Not all dependencies will be resolvable by the Container

What if there's a dependency that can't (or shouldn't) be solved by the Container? Well, you can pass an array as the second parameter with any data that should be sent to the class.

To get a better idea of where this would be necessary, let's explore a real open source poject. We'll use a package I discovered a few weeks ago, Onboard, created by @calebporzio.

Let's take a look at at the OnboardingManager class, specifically the constructor:

<?php

namespace Calebporzio\Onboard;

class OnboardingManager
{
    /**
    * Create the Onboarding Manager (should always be a singleton).
    *
    * @param mixed $user The parent app's user model.
    * @param \Calebporzio\Onboard\OnboardingSteps $onboardingSteps
    */
    public function __construct($user, OnboardingSteps $onboardingSteps)
    {
        $this->steps = $onboardingSteps->steps($user);
    }

    // rest of class method...
}

Notice how we aren't type hinting the $user dependency, so the Container wouldn't know how to fetch this dependency for us. Instead, we'll need to pass it in when resolving the class from the Container.

Let's resolve the class from the Container

The package has a GetsOnboarded trait that you can use in your User model, it has just an onboarding method.

<?php

namespace Calebporzio\Onboard;

use Illuminate\Support\Facades\App;

/**
 * This is the trait to be added to the app's User class.
 */
trait GetsOnboarded
{
    /**
    * This provides a pathway for the package's API
    *
    * @return \Calebporzio\Onboard\OnboardingManager $onboarding
    */
    public function onboarding()
    {
        return App::make(OnboardingManager::class, ['user' => $this]);
    }
}

Notice how we're using the App Facade to resolve the class from the Container so that the type hinted OnboardingSteps dependency gets passed in, but we manually pass in the value for the $user dependency.

For readability Laravel also offers an alias to the App::make method called makeWith which simply calls the make method behind the scenes.

Know you can start resolving classes from the Container and have all their dependencies resolved automatically for you. You have many ways to access the Container, using the App facade with the make method or the app or resolve helper functions. When within a Service Provider you can even access the Container with $this->app.

I'll keep writing more about using the Container so if you're interested, follow me on Twitter to get alerted once the next post goes live, I'm @wilburpowery on there.

Be a good person

Wilbur Powery — Sun, 13 May 2018 20:28:37 +0000

Photo by Priscilla Du Preez on Unsplash

We sometimes focus so much on becoming better at our profession or career, that we ignore becoming a better person in the process.

Ok, so yeah, I know it’s very important to keep getting better, especially in our times. Many of us might have the mentality of “If I don’t continually learn, I’ll become obsolete”.

Let me ask you a question, Have you ever met someone who is a total master in whatever they do for a living, but they are a real pain to work with? I’m pretty sure many of us know someone who fits that description, and believe me, that is not the person you’d want to be to other people.

I’m a software developer, and believe me when I say this: I’ve met some really smart and talented people who write software, they could master any programming language you throw at them, but their ability to talk to people, have empathy, and simply be a good person to others and have a positive impact in a group is really low.

So, my advice to you is to simply focus on being a good person, someone people enjoy working with, because your technical knowledge will only get you so far, the rest will depend on the way you treat people and make them feel.

Got any thoughts on this? Have you ever experienced working with someone like this? I’d love to hear your story.

Is their any API where I could get all my posts from the site?

Wilbur Powery — Sun, 13 May 2018 01:12:53 +0000

Hey guys, I’m thinking on killing the blog on my site and just publishing my content here. But, I’d still like to fetch all my posts and display them in my site. Any idea if there’s an endpoint to get them?

Switching from Laravel to Jigsaw

Wilbur Powery — Thu, 10 May 2018 13:42:54 +0000

Sometime ago I gave myself the job of redesigning my personal website. The first version was made using the Laravel Framework.

For this second version I started thinking if Laravel really was needed for a simple portfolio site like mine. After a few days of analyzing the code I wrote for the first version of the site, I discovered that I simply used Laravel bacause I love the Blade Templating Engine that comes with it. After coming to this realization I focused on finding a light, realiable and good tool I could use to simply set up a beautiful, eye-catching personal website where I could just create a markdown file and share my thoughts with everyone. After a few days of looking at a lot of great stuff online, I found the perfect tool for my needs, Jigsaw.

What is Jigsaw

At it’s core, Jigsaw is a framework for building static websites. It helps developers rapidly build static sites using the same modern tooling that you would use when building dynamic web applications.

What sets Jigsaw apart from common .html files

Using Jigsaw instead of creating some .html files and serving them online brings a lot of great features to the table. You have access to a lot of great features from the Laravel Framework but in a light and minimal form.

Some of the features Jigsaw offers are:

Blade Templates
Markdown pages
.blade.md files (Yes, Blade and Markdown mix)
Global Configuration File (It’s very handy)
Lots of helper methods
Collections
Sorting
Pagination
Variables and helper methods
Laravel Elixir support out of the box

The last design

Here is what the last design of the site looked like, I hope you like the new design I have made. Go take a look at the current design here.

Conclusion

Jigsaw is an awesome framework for creating static websites where you just need to display static content but you still want to use some of the features you love about Laravel, like Blade templates. Getting started is very easy, their documentation is great, and it’s still part of the Laravel community you love and enjoy.

Getting Started with Vue Router

Wilbur Powery — Tue, 19 Dec 2017 00:00:00 +0000

Vue.js is my go to Framework for building dynamic Javascript user interfaces. The thing I love the most about Vue.js is that it’s so easy to get started with it. Depending on your needs, you simply need to add a little script tag to your page, and you can embrace a great amount of the beauty of Vue.

Just in case you didn’t know, Vue-Router is a Vue.js plugin to add routing to your application. In this case, I’ll share with you a bit about how to get Vue-Router installed and setup so you can start building SPA’s in no time.

Install it

You can install vue-router using npm or yarn. Simply run any of the following commands in your terminal and you’re ready to keep going.
npm install vue-router
or
yarn add vue-router

Configure it

When using a module system, you need to tell Vue.js that it must use the VueRouter plugin.

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

import router from './router';

const app = new Vue({
    el: '#app',
    router, // same as router: router
});

After configuring Vue to use the vue-router plugin, you need to let the parent component know that it should use that router instance.

Following the previous steps, you now have vue-router installed and configured and can start building out your routing configuration.

Structure your application

They are many ways you can structure your application, but I mostly choose to do mine as follows:

I have a router/ folder inside the directory where I keep my scripts.
Inside the router/ folder, I create two files, index.js and routes.js

`index.js`

First of all, I choose to call this file index.js because when using a module system, I can import it simply by using the following command: import router from './router'. Notice I don’t need to specify the filename since modules systems will look for an index.js file by default.

// router/index.js
import VueRouter from 'vue-router'; //Import vue-router
import routes from './routes'; // Import my routes

//Export a new VueRouter instance
export default new VueRouter({
    mode: 'history',
    base: '/home/',
    routes,
});

They are a few things here that might not be clear to you at first glance. Let me explain each one.
The mode attribute by default is set to hash mode which adds a # to the url. In my case I set it to history mode to prevent that and also to leverage the history.pushState API to achieve URL navigation without a page reload.
The base attribute is to set a base url section from which all the routes will extend. For example, if we set a route to /dashboard , vue-router will actually look for the url /home/dashboard.
You can omit both of those attributes is you’re not looking for that behavior.

// router/routes.js

// Here we import our Vue Components
import DashboardPage from '../pages/Dashboard.vue';
import Error404 from '../pages/errors/Error404.vue';

// the routes are simply an array of objects
const routes = [
    {
        path: '/',
        redirect: '/dashboard'
    },
    {
        path: '/dashboard',
        name: 'dashboard',
        component: DashboardPage
    },
    {
        path: '*',
        name: '404',
        component: Error404
    }
];

export default routes;

Most of the Route objects needs to have at least two attributes, the path it should match and the component it should display when that path is matched.
The last object in the array with that wildcard * as the path, is used to show a 404 page for any route that was not matched. You are not required to have it, it's just an example on how to handle 404 errors with the router.

Ok, I have it setup, how do I use it now?

Navigating your the routes you have defined is very straight forward using two special elements Vue Router provides out of the box, they are <router-link></router-link> and <router-view></router-view>.

The router-link component renders by default an html a tag. You can specify what element you want to be rendered with the tag property. The to property is used to specify what route should be followed once the element is clicked.

<ul>
    <router-link tag="li" to="/dashboard" class="list-group-item">
        Dashboard
    </router-link>
</ul>

Before you can see each component rendered on your page, you need to make use of the <router-view> element. Using this element is very straight forward; simply add the element anywhere in the page where you would like your components to be mounted.

<div class="row">
    <div class="col-md-12">
        <!--All components will be mounted here-->
        <router-view></router-view>
    </div>
</div>

Conclusion

Vue.js is a very easy to use javascript framework, and it's router plugin proves this once again. In just a few seconds,you can easily have a javascript router installed, configured and working on your application.

Is there anything I missed in this post? Share it with me on twitter