Forem: Christopher Wray

Best UI Component Library for Desktop Keyboard support?

Christopher Wray — Fri, 16 Sep 2022 17:08:07 +0000

Hey web developers,

I'm needing some help.

What is the best UI element toolkit you have found for desktop keyboard support?

For desktop power users that prefer a keyboard vs a mouse.

Working within the browser, so needs to be a web UI kit.

(Tab enter, up-down arrow for select, etc.)

Thank you!

About Me- A Software Engineer & CEO- at Work.

Christopher Wray — Sat, 28 May 2022 20:18:42 +0000

I'm Chris. I'm a senior software engineer at a web agency I founded: Sol Company, and CEO & Founder of a company that's mission is to make work better. Awia. Here is a little about me and what I do for work and how that relates to my priorities.

What I do

I do web development for work, and I'm working with a team to make work better.

This involves a lot of things, like writing code on both backend frameworks, like Laravel, or doing front-end development with Vue. I also get the opportunity to work with a great team of other engineers, designers, and writers (contractors) that together help make work better.

I love my work. For me, doing things with incredible skill and care is something I've aspired to do since I was just out of High School. A lot of this came from my heritage passed down from my grandparents to my parents to my siblings, and also to me.

I was raised on a family farm north of a small town called Pasco in Washington state. Growing up, I started helping rake hay on the farm in the summer times to make any money I had for spending. Watching my parents and siblings had a huge impact on me, and my work ethic and has helped me in my career now as a software engineer.

My priorities are:

This list is not exhaustive, but below are the three key priorities of my life that are non-negotiable.

My King

Jesus. He's transformed my life and saved me from the guilt that I rightly deserve for the wrong things I have done. He is the life that gives us breath every day. He has mercies for us every morning. To deny Him, would be to deny life itself, and I cannot do that. I love Him.

My Queen

Ariel, my beautiful wife. She is my Queen. I love her and everything she is is wonderful. I live to support her in her dreams, honor her with my choices and love her as Christ loves his bride, the Church.

Our children.

As of writing, we have two children. Noah James is 3 and Evelin Grace is almost 1. Loving and leading them as they become instruments for the glorious kingdom, which is God's family, is my greatest joy. My work supports me and helps me do that in a way they can see. I must provide for them as God has called me as he has all fathers.

This is a little bit about me. There are so many things I learn on a daily basis, and God updates my priorities and callings daily. Today, as I write this, these are the things that stick out to me that those I work with should know. I don't foresee those priorities changing, but my relationship with work will continue to. God will continue to make me into the type of person He wants me to be, and for that I am grateful.

My thoughts on work:

I believe that people should not be discriminated against for being who they believe themselves to be, or even the past things they've done that they regret and have changed.

This is why I am open about my faith in the Creator of the Universe. This may offend some, but that is not my intention.

My intention is to be transparent about who I am as a person so that I can be part of a culture where people are open and honest about their beliefs, and willing to accept others that believe differently than them.

I'm growing in this way, but I feel strongly that one of the best ways I can contribute to this culture is by being transparent myself.

When I'm at work, my goal is to work for the Glory of God. In order to do this, I don't make my workplace a setting where I try to force or coerce others to believe the way I do.

My goal is to do every job I have with skill and care. I only bring up my faith in a setting where I can share in a way that allows me to be raw and open about who I am as a person.

Every day at work, you will find me working my utmost to serve my employer or client to the absolute best of my ability. Every single day I get the opportunity to honor God, not with words only but with the actions I take in serving my co-workers and clients in the best way I'm able.

My Past and My Struggles

I have struggled with mental health and have learned to overcome it.

In fact, I take medication daily for depression and anxiety, and preserving my mental well-being is a key part of the decisions I make regarding work. If I am healthy and happy, I can do so much more, and preserving this state is crucial to my above priorities.

I was charged with a felony.

It is on for dismissal.
It has taught me a lot.

This felony (charge) is a stain on my past and a reminder to me of a time of grief, but thankfully, because of this charge, I've been able to get consistent counseling monthly, and I've found medical providers that are able to help me with my struggles with mental health, and I've found much more empathy for people that are struggling in more than one way. I can say now, well over a year after the charge letter came in the mail, that I am truly grateful for this part of my past.

My future plans

I'm working with a team to build a company to make work better. Our first product is a wholesale nursery management platform. We plan to make it the absolute best software for wholesale nurseries to manage inventory and plant sales.

Thanks so much for taking the time to read this, and get to know who I am a little. I would love to learn more about you! Could you send me a letter via my contact form? I read every message sent, and I respond to most of them!

Have a super day.

-Chris

How to Create Multiple Wildcard Routes at the Same Root Path in Laravel.

Christopher Wray — Fri, 15 Apr 2022 17:41:01 +0000

Sometimes, you may want to make sure that multiple types of resources are available at a same root wildcard path on your applications website.

For example, you may want to access blog articles at a /blog-article-slug root URL, and you may also want to find custom pages like /privacy-policy at the root URL as well.

Laravel Route Model Binding

In Laravel, there is a nice feature called route model binding that works for most dynamic resource routing requirements. In order to utilize them, you define a route in your route config file, and implicitly or explicitly bind that route to a model that you have defined in your Models directory.

Route definition

Laravel will automatically use the variable name you use in your route definition to find the appropriate model, or you can set the type of resource you are expecting directly in your controller method parameters, which is most recommended.

For our example of /blog-slug-url we would first define the route in the routes file, defining the route with the static function get() on the Route façade.

Then, we would write a callback function or controller that the route should use to handle the request.

//In routes/web.php
<?php
use App\Http\Controllers\BlogController;

Route::get('/{blog}', [BlogController::class, 'show'])->name('pages.show');

In the above example, we are adding a wildcard route parameter for any blog in the curly places, and telling our application to handle the request in the Blog Controller using the show() method.

💡 You can also give this route a name for easy reference, which is what the name() method is doing in our example.

Model controllers

Just so you know what a blog controller may look like, I’ve provided an example here:

//in App/Http/Controllers/BlogController.php
<?php

namespace App\Http\Controllers;

use App\Models\Blog;
use Illuminate\Http\Request;

class BlogController extends Controller
{
    /**
     * Display a blog article
     *
     * @return \Illuminate\Http\Response
     */
    public function show(Blog $blog)
    {
        return view('blogs.show', compact('blog'));
    }
}

Most of the times, you will want your routes to be nested in logical resource directories, which for our needs, we would probably define our example blog route to be /blog/blog-slug-url, making it easy to define routes and use model binding for multiple kinds of resources.

/blog/blog-url //This goes to a blog page
/blog //This goes to an index view of all recent blogs.
/services/service-url //This goes to a service page
/services // This goes to a list of services

You get the idea.

For most web applications, this is exactly the type of behavior you should implement and expect.

Routes with Same Root Path

But, in some cases, you may have a need to put multiple types of resources on the same root directory. Like in the example I started with, you may want to put blogs and custom pages all at the same logical place in the app.

This is where things will get tricky.

Requests made to the path: the first route defined will be served

The issue is that our app doesn’t care at all about what you put between the curly braces. If the route matches, it will automatically serve the request to the first wildcard route in your app, no matter what comes after.

This will automatically cause an issue in our case. If we define the route for /blog-slug first, then the app will send requests made to /about to the same controller as the blogs!

This means we cannot use Laravel’s route model binding in these cases.

Use a switch controller

In order to ensure that requests are sent correctly to either the blog controller for blogs, or the page controller for custom pages, we must create an intermediary controller. This controller will act as a switch for our app to tell it which controller is most appropriate for the request it is being served.

Define the route to the controller

So, instead of defining two routes for both blogs and pages, we should define one route that both resources use to handle a matching request.

Here is what that looks like:

// In routes/web.php
<?php
use App\Http\Controllers\ResolvePathController; //You can name this controller whatever makes sense to you.

Route::get('/{blogOrPageSlug}', [ResolvePathController::class, 'show'])->name('pages.show');As you can see, the curly brace variable changed. The name of that variable really doesn’t matter. I’ve named it “blogOrPageSlug” because that is a name that makes sense to me.

You can also notice that I’m not using either the Blog controller or the Page controller in our route file, but telling the app to use a new controller that acts as the switch for our app.

💡 Make sure to define this route after any other static routes that are using the same directory path!

Create the controller

Then, we need to create that new controller, accept the slug and request as parameters, and use the slug to see which controller to direct our requests to.

In our case, the slug either references a blog or a page stored in our database.

That should help us out a lot, so we know that we need to look for a matching slug in one of those resources.

If we can’t find the first resource, we know that the slug either references the other model, or it doesn’t exist.

//In App/Http/Controllers/ResolvePathController.php
<?php

namespace App\Http\Controllers;

use App\Models\Blog;
use App\Models\Page;
use Illuminate\Http\Request;

class ResolvePathController extends Controller
{
    public function show(Request $request, string $pageOrBlogSlug)
    {
        $page = Page::whereSlug($pageOrBlogSlug)->first();
        if ($page) {
            return PageController::show($page);
        }

        $blog = Blog::whereSlug($pageOrBlogSlug)->firstOrFail();
        return BlogController::show($request, $blog);
    }
}

Search mindfully

In our example application, first we’re searching our database for pages. I chose to search pages first, because I am guessing that eventually our app will have fewer custom pages than blog articles.

Since we have to search through one of the resources before the other, it makes sense to me to search through the smallest dataset first, as it wouldn’t be good if we had to search through every blog article slug in the database each time a user wanted to visit the about page. That’s up to you to decide though.

Don't return a failure if you can't find the first model resource

I’m also only using the first() method on the collection for the page model. I want to check if there is a page but be able to check a blog if the page doesn’t exist.

On the final search, return a 404 if the resource is not found.

On the second call to look for blogs, though, I am using firstOrFail() because we want to return a 404 page if no blog article exists with the slug that is requested. If you needed to have more than two Models you are wanting to direct users to, then you will want to make that call the first() method as well but make sure the last model you search is returning a 404 for unfound resources.

Call model controllers statically

One other thing that you may notice is that we are returning a call to the controllers methods statically. This is a very important change that you will need to make to your controller methods in order to call them properly, you must make those controller methods static methods so that they can be called this way.

In our example PageController:

<?php

namespace App\Http\Controllers;

use App\Models\Page;
use Illuminate\Http\Request;

class PageController extends Controller
{
    /**
     * Display a page
     * This has to be static, because we call this from the resolve path controller.
     *
     * @param Page $page
     * @return \Illuminate\View\View
     */
    public static function show(Page $page)
    {
        return view('pages.show', \compact('page'));
    }
}

This controller method is different than other controller methods because we are not instantiating the controller class when directing the app to use the show method. There may be a better way to do this but I felt this was a nice way.

Make sure you also you update the show method of your Blog Controller in the same way.

A Couple Things to Consider

Validate slug uniqueness

One thing to think about is validation.

What happens if a user creates a page with the same slug as a blog article? Well, no-one will ever be directed to the blog article if they use that slug, making the article removed from the site.

You will run into some major painful bugs if you don’t include validation on both models slugs to ensure slugs are never the same. If not, you may be clicking on an article link that should take you to an article page, and instead you keep getting to the same picky custom page.

Index slug columns on the database

Another thing to think about is site speed. You will definitely want to index your slug column on your database tables in order to ensure lookup time is as fast as possible. I would try to steer clear away from this type of resource structuring as much as possible as well.

Conclusion

This is something I thought about a long time, and thankfully had an incredible senior engineer Alex Topal to bounce the idea off of. Within a couple minutes he had this solution and we were able to implement this much faster.

I’m writing this down so that you hopefully don’t have to spend too much time thinking about a way to do this, and can quickly get going the next time you run into a feature requesting this.

I originally posted this article on my website.

How to add Amazon affiliate and Google AdSense ads to your Vue app.

Christopher Wray — Mon, 31 Jan 2022 05:16:21 +0000

Sooner or later, if you are developing a content site, niche blog, or some other website that attracts organic visitors, you may decide you want to start making money with your website in the form of ads. When you go to do that, you may end up using some sort of script tag that the ad service provides you with that you need to add to your html somewhere.

If you go ahead and paste the script tag as it is somewhere in your Vue app template, right away your console will start to give you errors:

“Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as script, as they will not be parsed.”

So, how should you go about fixing this issue?

For me, the best way I found was by creating a Vue component just for my ad. That way, I could simply add the component to the pages I wanted the ads to appear, and have a single source of truth for each ad I was going to serve.

I also needed a way to load the script asynchronously from the Vue script tag so that the browser wouldn't have issues with ads calling document.write synchronously. For that, I found a link to postscribe, an npm package just for doing that.

First, install postscribe:

npm install --save postscribe

Then, use postscribe to asynchronously load your script in your Vue component and attach it to the dom:

<template>
    <div>
        <div id="homeadinfo"></div>
        <div id="homeadimage"></div>
    </div>
</template>
<script>
/* eslint-disable no-useless-escape */
import postscribe from "postscribe";
export default {
    name: "home-garden-banner-ad", //Edit as needed
    mounted: function() {
        postscribe(
            "#homeadinfo",
            `<script type="text/javascript">
                        amzn_assoc_ad_type = "banner";
                        amzn_assoc_marketplace = "amazon";
                        amzn_assoc_region = "US";
                        amzn_assoc_placement = "assoc_banner_placement_default";
                        amzn_assoc_campaigns = "your campaign";
                        amzn_assoc_banner_type = "category";
                        amzn_assoc_isresponsive = "true";
                        amzn_assoc_banner_id = "your banner id";
                        amzn_assoc_tracking_id = "your tracking id";
                        amzn_assoc_linkid = "your id";
                    <\/script>`
        );

        postscribe(
            "#homeadimage",
            `<script type="text/javascript"
                                        src="//z-na.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&Operation=GetScript&ID=OneJS&WS=1">
                    <\/script>`
        );
    }
};
</script>

This attaches the scripts and loads them asynchronously using the postscribe package.

Edit the id and script tags as needed.

Then, import and use your component in your pages/ components.

<template>
  <home-garden-banner-ad></home-garden-banner-ad>
  ...
</template>
<script>
   import HomeGardenBannerAd from "@/Components/Ads/HomeGardenBannerAd.vue";
  export default {
    components: {
        HomeGardenBannerAd
    },
}
</script>

The great way about this method is you can use those ads over and over, and you can have one central place to edit your ads as needed!

Show Your Work!

Christopher Wray — Sat, 22 Jan 2022 22:35:17 +0000

My wife got me this awesome book by Austin Kleon titled, "Show your Work!". The book is super easy to read and I highly recommend it. The title is pretty clear, but the point of the book is how to share your work and use that as a way to get discovered.

Here is me sharing my work.

The past few months I've been working on a project with Garden Gate Nursery that soon will be finished. It's an inventory program that will help plant nurseries track inventory as it comes and goes from their nursery and generate orders & quotes for customers.

It will be fully integrated with QuickBooks Online & Desktop to generate invoices for orders and track sales. We may integrate with the QuickBooks Payments API as well to be able to charge customers through the app.

It is built on Laravel utilizing Inertia JS as a connector with the backend and Vue on the frontend. I'm using Tailwind CSS for the styling and Daisy UI for some components.

This video is a fast forwarded version of all the updates I took while working on the project. You can see the progress I made on the app and how it evolved over time! All in under 10 minutes.

Tell me 1 reason why I should go with Ruby on Rails for my next Web App project.

Christopher Wray — Fri, 12 Mar 2021 15:58:09 +0000

Tell me 1 reason why I should go with Ruby on Rails for my next Web App project!

Going with dotnet for a new project. What’s your best advice?

Christopher Wray — Sun, 28 Feb 2021 16:11:47 +0000

For a new project I’m starting on in a couple months, I am planning to utilize .net.

I would love to hear what your best advice is for someone starting with the ecosystem?

My goal is to first build the web app then build the mobile and desktop application for the project.

How’s the best way to go about learning the web side of things?

Any other advice you have?

How personal should you go?

Christopher Wray — Fri, 26 Feb 2021 11:29:59 +0000

Recently, I remembered some extremely painful life events that have caused me to pretty much poop out of everything.

My question to you is how personal should you go when sharing with clients that it will take longer to get work done than before?

Another question is: Has something like this ever happened to you? How did you work through your pain healthily?

It’s hard.

Christopher Wray — Thu, 11 Feb 2021 05:22:14 +0000

Moving back to the USA. Any tips?

Apple Mac OS or Microsoft Windows 10?

Christopher Wray — Mon, 01 Feb 2021 14:02:51 +0000

Trying to set up our business for future success.

Things We're Looking For

Ease of addition to team. (Adding more computers, etc.)
Ease of integrating development processes.
Ease of CI deployments.
Ease of interacting with git & GitHub
Ease of secure remote communications between a dispersed workforce across continents.
Financially sustainable long term.

What have you prefered to use on your team, and why?

There is no right answer, just want to see what others have decided and what reasonings are behind that decision.

Google or Microsoft for email?

Christopher Wray — Sat, 30 Jan 2021 06:23:08 +0000

When I opened my business 3 years ago, I created a G Suite account and became quite fed up with the interface, leading me to move to Office 365.

Recently I found that Google has majorly improved its offering and changed the name to workspace. They have also made the interface much easier to use.

Now, I’m trying to set up our systems for rapid growth.

Developers:

I want to see what you guys feel is best for a developers work life?

And if you do project management:

From a project management standpoint, which email and cloud provider is the simplest to maintain, integrate with software, and add new users to?

Thank you 🙏

How would you structure an application like the Bible app "YouVersion" or an eReader?

Christopher Wray — Mon, 18 Jan 2021 22:55:35 +0000

I have been pondering on my mind a lot lately about how to build a reader application. Specifically, how to build the data structure.

Have any of you built a reader app before, or bible application?

Do you know of open source projects that show how a database should be set up for this kind of project?

Are eReaders built on open source tech?