Single Page App with Livewire and InertiaJS

I really like to create app using Laravel and other frontend framework. At first Im too excited with vuejs because for me its easy and developer friendly. You do not have to deal with Vanilla Javascript or JQuery. Yeah I know JQuery is very good and my best friend for a long time. But web development moved really fast and if you do not look around you will left behind.

Im working on side project and I was on hard time to decide which one to use between two great projects. Between InertiaJS and Livewire Laravel.

I actually write a good lines of code using InertiaJS and Laravel but as we all know InertiaJS is using vuejs and other frontend framework. There is nothing wrong with vuejs because it is very powerful.

And today I guess I really want to create the app using a server side code with less if no Javascript to deal with.

So I decided to stop coding with InertiaJS and go with Livewire Laravel.

It is really up to you what framework you want to use. If you like to use using vuejs or other framework then go with InertiaJS.

But for me I really like to code using Javascript free if possible.

Inertia.js is insane

Did you ever heard about Inertia.js?

I like to work frontend side using vueJS but I have to write frontend routes also using https://router.vuejs.org. I do not see anything wrong with https://router.vuejs.org but I just hate creating frontend routes then I should also create routes in Laravel side.

With the use of Inertia.js I do not have to write frontend routes which is a very nice thing to me.

Theres a lot of good things about Inertia.js and you should see it for your self ūüôā

Jonathan Reinink did a very good job on this insane thing!

https://reinink.ca/articles/introducing-inertia-js

Combine Google Fonts for Web Performance

We can increase web performance by combining google font css.

We use to write like these:

<link rel="stylesheet" href='http://fonts.googleapis.com/css?family=Lato' />
<link rel="stylesheet" href='http://fonts.googleapis.com/css?family=Poppins:400,600,700' />

Now we can write like this:

<link rel="stylesheet" href='http://fonts.googleapis.com/css?family=Lato|Poppins:400,600,700' />

Push and Pull to git with using SSH Keys

Ever experience that every time you pull or push to bitbucket it ask you to enter password if not both username and password?

Theres a better way to push and pull to git using ssh.

  • Generate public and private keys
$> ssh-keygen -t rsa 

If you already created ssh keys before then just copy the content of the public key

$> cat ~/.ssh/id_rsa.pub

If you are using bitbucket, go to settings

https://bitbucket.org/account/user/{yourusername}/ssh-keys/

and create ssh key the you copy

Add SSH Key
Add SSH Key

Take note to use the “SSH” version before cloning. or if you’re already using HTTPS, just edit git/config then replace the URL.

$> nano .git/config
[core]
 repositoryformatversion = 0
 filemode = true
 bare = false
 logallrefupdates = true
[remote "origin"]
 url = git@bitbucket.org:myteam/repo.git
 fetch = +refs/heads/*:refs/remotes/origin/*
[branch "master"]
 remote = origin
 merge = refs/heads/master

Automate checking of PHP Coding Standards

I am so lazy manually check my code for coding standards. What if we can automatically check our code for coding standards.

Here comes Squiz Labs’¬†PHP_CodeSniffer which we can use to automate our code checking for standards.

PHP_CodeSniffer is a set of two PHP scripts; the main phpcs script that tokenizes PHP, JavaScript and CSS files to detect violations of a defined coding standard, and a second phpcbf script to automatically correct coding standard violations. PHP_CodeSniffer is an essential development tool that ensures your code remains clean and consistent.

A coding standard in PHP_CodeSniffer is a collection of sniff files. Each sniff file checks one part of the coding standard only. Multiple coding standards can be used within PHP_CodeSniffer so that the one installation can be used across multiple projects. The default coding standard used by PHP_CodeSniffer is the PEAR coding standard

Requirements

PHP_CodeSniffer requires PHP version 5.4.0 or greater, although individual sniffs may have additional requirements such as external applications and scripts. See the Configuration Options manual page for a list of these requirements.

Installation

Composer

If you use Composer, you can install PHP_CodeSniffer system-wide with the following command:

composer global require "squizlabs/php_codesniffer=*"

Make sure you have the composer bin dir in your PATH. The default value is ~/.composer/vendor/bin/, but you can check the value that you need to use by running composer global config bin-dir --absolute.

Usage

Printing a List of Installed Coding Standards

$ phpcs -i
The installed coding standards are MySource, PEAR, PHPCS, PSR1, PSR2, Squiz and Zend

To check a file against the PSR1 coding standard, simply specify the file’s location.

$ phpcs --standard=PSR1 /path/to/code/myfile.php

FILE: /path/to/code/myfile.php
--------------------------------------------------------------------------------
FOUND 5 ERROR(S) AFFECTING 2 LINE(S)
--------------------------------------------------------------------------------
  2 | ERROR | Missing file doc comment
 20 | ERROR | PHP keywords must be lowercase; expected "false" but found "FALSE"
 47 | ERROR | Line not indented correctly; expected 4 spaces but found 1
 51 | ERROR | Missing function doc comment
 88 | ERROR | Line not indented correctly; expected 9 spaces but found 6
--------------------------------------------------------------------------------

Or, if you wish to check an entire directory, you can specify the directory location instead of a file.

$ phpcs --standard=PSR1 /path/to/code

FILE: /path/to/code/myfile.php
--------------------------------------------------------------------------------
FOUND 5 ERROR(S) AFFECTING 5 LINE(S)
--------------------------------------------------------------------------------
  2 | ERROR | Missing file doc comment
 20 | ERROR | PHP keywords must be lowercase; expected "false" but found "FALSE"
 47 | ERROR | Line not indented correctly; expected 4 spaces but found 1
 51 | ERROR | Missing function doc comment
 88 | ERROR | Line not indented correctly; expected 9 spaces but found 6
--------------------------------------------------------------------------------

FILE: /path/to/code/yourfile.php
--------------------------------------------------------------------------------
FOUND 1 ERROR(S) AND 1 WARNING(S) AFFECTING 1 LINE(S)
--------------------------------------------------------------------------------
 21 | ERROR   | PHP keywords must be lowercase; expected "false" but found
    |         | "FALSE"
 21 | WARNING | Equals sign not aligned with surrounding assignments
--------------------------------------------------------------------------------

Using Laravel Valet and ngrok

One of the things we do as web developer is testing the call back or web hook of web services of API.
When we develop API of PayPal, Braintree and other payment gateways, we need to check for Webhook.
When we are testing API webhook, is not so good if we change code and then upload to our test server.
May be its much better if we change our code locally and call our web hook that point to our local server.

https://ngrok.com is one of the solutions we can use. I think there are a lot of tools out there but its the tool
that I use for now.

Its so easy to install and use https://ngrok.com

Just download the app and run some code.

You better check the docs https://ngrok.com/docs for more info.

If you are using Laravel Valet then its much easy

Using your terminal navigate to your app and run

valet share