DEV Community: Manuel Ojeda

Create a proper debug setup in VS Code with Laravel Sail in Linux

Manuel Ojeda — Wed, 23 Feb 2022 16:18:31 +0000

Laravel give to us a lot of different dev enviroments, from Laravel Homestead, Laravel Valet, and the newest adittion: Laravel Sail, which is the default enviroment for Laravel because it gives to us a quick and in no-time enviroment using Docker. This brings the possibility that our project works in every operative system, like:

MacOS
Windows
Linux

This guide will help to you to make the proper config without any issue to develop and debug with Laravel Sail and VS Code which has a great Debugger and is so powerful.

Previous steps

At this point I'll suppose that you already have Docker installed. In case you don't you can follow this guide.

1. Create a new Laravel Sail project

We will execute the next command to create an example project, you can change the example-app with any name you want to give to your project:



curl -s https://laravel.build/example-app | bash

Wait until is ready, it will take some time if this is the first time you do this process because is downloading all the images from Docker and the project dependencies (in case you have did this before, it won't take much longer).

And to finish this step, we change to the new project with:



cd ./example-app

2. Publish all the Docker config files

Once we are inside the directory, we need to turn on the project with:



./vendor/bin/sail up -d

And then we run the next command to publish the Docker config files we need to edit:



./vendor/bin/sail artisan sail:publish

Open the project with:



code .

Now we can stop the project with:



./vendor/bin/sail down



./vendor/bin/sail stop

3. Config the project

Open docker-compose.yml and add the next:




services:
    laravel.test:
        build:
            context: ./docker/8.1
            dockerfile: Dockerfile
            args:
                WWWGROUP: '${WWWGROUP}'
                # add these two lines
                XDEBUG: '${APP_DEBUG:-false}'
                XDEBUG_PORT: '${SAIL_XDEBUG_PORT:-9003}'

# we need to expose the port 9003,
# so we add the line after the ports are declared.
ports:
    - '${APP_PORT:-80}:80'
expose:
    - "9003"
# Add XDEBUG_CONFIG, PHP_XDEBUG_ENABLED y XDEBUG_MODE
environment:
    WWWUSER: '${WWWUSER}'
    LARAVEL_SAIL: 1
    XDEBUG_CONFIG: ${SAIL_XDEBUG_CONFIG:-client_host=172.120.19.9}
    PHP_XDEBUG_ENABLED: 1
    XDEBUG_MODE: '${SAIL_XDEBUG_MODE:-off}'

# And in the networks section has:
networks:
    sail:
        driver: bridge

# Add after the driver configutation:
networks:
    sail:
        driver: bridge
        ipam:
            driver: default
            config:
                # In this case you can add whatever subnet you want of you can live it as this guide has.
                - subnet: 172.120.19.0/24

We are done with the docker-compose.yml config, now we go and edit ./docker/8.1/php.ini and add to the end of the file:



[XDebug]
xdebug.start_with_request = yes
xdebug.show_local_vars = on
xdebug.mode = debug
xdebug.discover_client_host = true
xdebug.client_host = host.docker.internal
xdebug.client_port = 9003

Last but not least we modify the .env add in the end of the file:



SAIL_XDEBUG_MODE=develop,debug
SAIL_XDEBUG_CONFIG="client_host=localhost"

Once we have everything set, we should turn on the project once more but rebuilding everything again (it won't take too much time, I promise!):



./vendor/bin/sail up --build -d

Set up VSCode to work with Laravel Sail

Open VScode and we are going to need the next:

Install PHP Debug
Install Docker and Remote Explorer
Config the debugger
Install Xdebug Helper in your browser

Install PHP Debug

We need to install the next extension, in case you don't have it:
https://marketplace.visualstudio.com/items?itemName=xdebug.php-debug

Install Docker and Remote Explorer

In case you don't have it, install: https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker y https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers
this will help us to gain access through VS Code to the project container and we can edit the code we need while we are in the development.

Once installed we click in here:

This button will show a list of running containers from your system, in this case we need to select the one that finished with laravel.test_1 and doing a click here:

Once the container is open in VSCode we need to open the next directory /var/www/html, the Laravel code resides here.

Note: We need to confirm that we have PHP Debug installed by navigating the extensions list, in case is not installed it will have the next label Install in Container...

Config the debugger

Finally we go the Debugger section and create a launch.json file:

This will show a list of languages we can debug, in this case select PHP. It will open a newly created file, delete all the object inside the configurations array and put this config:



{

    // Use IntelliSense to learn about possible attributes.

    // Hover to view descriptions of existing attributes.

    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387

    "version": "0.2.0",

    "configurations": [

        {

            "name": "Listen for Xdebug",

            "type": "php",

            "request": "launch",

            "port": 9003,

            "pathMappings": {

                "/var/www/html": "${workspaceFolder}"

            }

        }

    ]

}

Install Xdebug helper

Now go to your browser and install:

Look up for the extension and click it, it will show a list and enable Debug, this will help us to send the signal from our browser to your IDE to start the debugging when you visit a route:

And we are ready! We have our VS Code done with this config asnd ready to debug.

5. Testing

Now go to VS Code and edit routes/web.php, select a breakpoint like in the image and press F5, it will start the debug session:

Open up the browser and go to http://localhost, it should automatically execute the debugger in VSCode, like this:

And we are ready! I hope this works for you and all I have to say is:

Happy hunting!

Learn to create your custom Global State Management with Vue 3

Manuel Ojeda — Mon, 10 May 2021 19:46:09 +0000

Learn to create your custom Global State Management with Vue 3

Since Vue 3 Beta days we knew how awesome this framework was going to be, and since it annoucement we knew they did a monorepo making a lot of the feature from the framework available outside a Vue component, with this I mean:



import { /* Anything you need from Vue goes here */ } from 'vue'

So we are going to use this advantage to create a simple but powerful Global State Management with a single few steps, so let's get started.

Let's create a simple app

For this example let use a simple example, a counter that comes for default using the amazing Vite.js, for this we need to run:



npm init @vitejs/app storex (or the name you want to use)

After that, select vue

Then JavaScript or TypeScript, it will work in both:

Then follow the rest by changing into the recently created project and run npm install and open up the code in the the editor of your preference.

Creating the store

Let's begin with the store by creating a new folder inside the src folder by naming it, as you probably guess it, store and create a index.js inside the folder, the project directories should look like somethimg like this:

Once created the index file open it and place the next code:



import { reactive } from 'vue'

const store = ({
  state: reactive({
    count: null
  }),
  getters: {
    getCount() {
      return store.state.count
    }
  },
  mutations: {
    incrementCount() {
      store.state.count++
    }
  },
  actions: {
    initializeCount() {
      store.state.count = 0
    }
  }
})

export default store

Let explain why the store is created like this:



import { reactive } from 'vue'

// We need to import the reactive function from Vue to make the
// global object reactive and get the treatment like this was Vuex



const store = ({
  // Create a state with the reactive function we imported previously, this will manage the reactivity for us
  state: reactive({
    count: null 
    // If this is null is for the example,
    // of course you can initialize the
    // counter with 0 directly
  }),
  // This section will handle the getters
  getters: {
    getCount() {
      return store.state.count
    }
  },
  // This section will manage the changes into the state
  mutations: {
    incrementCount() {
      store.state.count++
    }
  },
  // This section will manage the actions needed for our store
  actions: {
    initializeCount() {
      store.state.count = 0
    }
  }
})

And that's it, the store is created, now we need to use it in our app.

Using the Store in the App

Open main.js file in the root of src and change the code with this:



import { createApp } from 'vue'
import store from './store'
import App from './App.vue'

const app = createApp(App)
store.actions.initializeCount()

app.mount('#app')

/*
* By default the main.js comes like this:
* createApp(app)
* .mount(#app)
* We changed a little the behaviour by assigning the createApp 
* to the const app to avoid the mount before initializing the store
*/

In App.js we need to change or add the store to track correctly in a global way when we are debugging/testing the application, so let's add the state as a computed property:

App.vue

If you want to use this sugar syntax, this all what you need, but be aware that the complete store is visible in the Dev Tools:



<script setup>
import { computed } from '@vue/runtime-core'
import HelloWorld from './components/HelloWorld.vue'
import store from './store'

const state = computed(() => store.state)
</script>

As mentioned the store is completily visible in the dev tools

In case you want to make only the state visible you need to change the code like this but always using the Composition API:



<script>
import { defineComponent, computed } from '@vue/runtime-core'
import HelloWorld from './components/HelloWorld.vue'
import store from './store'

export default defineComponent({
  components: {
    HelloWorld
  },
  setup () {
    const state = computed(() => store.state)

    return {
      state
    }
  }
})
</script>

Only the state is visible in dev tools, so this is easily to debug when is needed

HelloWorld.vue

Open up HelloWorld.vue which can be found in the Components directory.

Once is ready to edit you need to change the code for this:



<template>
  <h1>{{ msg }}</h1>

  <p>
    <a href="https://vitejs.dev/guide/features.html" target="_blank">
      Vite Documentation
    </a>
    |
    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
  </p>

  <!-- 
    You need to change the @click for the method created that
    will handle the change from the store
    Also change the count inside the {{  }}
  -->
  <button @click="increment">count is: {{ count }}</button>
  <p>
    Edit
    <code>components/HelloWorld.vue</code> to test hot module replacement.
  </p>
</template>

<!-- 
  Change the script from the sugar syntax 
  to the Oficial Composition API way
-->
<script>
import { defineComponent, computed } from 'vue'

// Import the store
import store from '../store'

export default defineComponent({
  props: {
    msg: String
  },
  setup () {
    // Send the count as a computed value from
    // the getters in the store
    const count = computed(() => store.getters.getCount())

    // This method will commit the change from the store
    const increment = () => {
      store.mutations.incrementCount()
    }

    return {
      count,
      increment
    }
  }
})
</script>

<style scoped>
a {
  color: #42b983;
}
</style>

And we get this final result!

And that's it!!! We have created a simple but powerful Global State Management using the tools that Vue gives us and is fantastic what we can create from it, of course if you need advanced features I recommend to use Pinia or Vuex, but if you don't want to add more weight into your project this simple State Management should be enough.

Tell me what you think of this trick in the commentary and I hope is helpful for you, see around the next time.

How to setup WSL 2 - The easy way

Manuel Ojeda — Sun, 07 Jun 2020 19:48:46 +0000

WSL has become a popular choice tool of developmnet in Windows 10. With this tool you don't need to make a dual boot setup in your PC to have all the potencial of Linux because WSL gives you all what you need to start the developent ASAP, but of course WSL have some flaws like slow performance for I/O, slow file system mainly.

Microsoft released in the last main update for Windows 10 (Release 2004, build 19041 or newer) the new version of WSL, WSL 2.

But why WSL 2?

The main feature of WSL 2 is giving a better performace comparing it with WSL 1, MS did a great work that they boosted up to 20x times than the original version (that's a lot! 🤯), and of course there are many features like:

Full System Call Compatibility
Small memory usage
Accesing to WSL files in Windows Explorer though the network section
And mainly, Full Linux Kernal

What do I need to run WSL 2?

As I said before, you need to have Windows 10 Release 2004 Build 19041 or newer and any other Windows 10 than Windows 10 S according to MS.

Installation

First, we need to enable as usual WSL into out system and Hyper-V, a virtualization tool from Microsoft, this VM tool is needed because WSL 2 works as a kind of Virtual Machine, but in the unique way from Microsoft (this is where the magic happens)

Press the Windows key and type features and select: Activate or deactivate Windows features

An small windows with a list of features available for our system, we need to look for Hyper-V and Windows Subsystem for Linux, scroll through the list and check both options.

After both options are checked, press Accept (or OK, sorry for the spanish). Windows will start downloading the files needed, after it finishes, it will propmt to you to Restart your machine, accept the restart.

Once your machine restarted, you are ready to download Ubuntu from the Microsoft Store, search it through the Windows Store or from this link. Once the download is done, run the app, wait until the installation is ready and setup your user, we are almost done.

As you can see, this is the normal process from WSL 1, but this is the aditional step we need to do, open up Powershell and type: wsl --list --verbose, running this command should list your distro as:

Distro Status  Version
Ubuntu Stopped 1

As you can see, we still have WSL 1 being selected for our distro, to setup WSL 2 we need to run this command: wsl --set-version <your-distro-name> 2, using the example should be: wsl --set-version Ubuntu 2, it will show you a message that it will take some time to make the conversion to WSL 2, at this point you can do anything else like going for some coffee, stretch up your arms or legs, anything because it will some minutes (around 10-15 minutes).

Once the process is completed run once again the command: wsl --list --verbose or wsl -l -v as a shortcut, the list should display as

Distro Status  Version
Ubuntu Stopped 2

And now we have WSL 2 ready to rock!

Especial considerations

By using WSL 2 we need to have some special considerations:

Don't use any app in Windows that uses Port 53, this port is needed by Hyper-V to have access to the internet and Windows, so if you have an app like Acrylic UI, this will prevent to WSL 2 start up running.
If you are a Laravel developer, careful by installing cpriego/valet-linux, it will block your access to internet from your distro (I had some issues by trying to git pull a project until I found out it was the problem)

And that's it, is all for now, I hope this guide helps you with the process, see you next time around here.

TypeScript - Interfaces

Manuel Ojeda — Thu, 14 May 2020 16:48:45 +0000

TypeScript: Interfaces

As we read before, the typing system from TypeScript is the main feature inside this superset by adding a strong typed system into JavaScript. Now, one of the most used features is called: Interfaces

What is an Interface?

An Interface we can calling as a properties contract with need to be fulfilled in order to satisfy the requirement in the code about that Interface. The sintax is pretty simple, to declare an interface need to be like.

interface <PutYourInterfaceNameHere> {
  yourProperty?: <your type here>;
}
// The ? is optional and you indicate into the contract that property is optional and is not required to fulfill the interface.

Example:

interface Foo { // <- Needs to be PascalCase
  Bar: string;
  MyBar: boolean;
  MyFoo?: number;
}

And how to use it? Just like a type, you need to declare it as a type:

let MyFooExample: Foo

Benefits? If you are using VS Code, Intellisense will be listening and helping you by showing all the properties that the interface has, also you can make a group of types you need in case you are using OOP, this helps you to make your code cleaner:

Pretty simple, isn't? Tell me what you think about the interfaces? Tell me in the comment section your thoughts and see you next time.

Vue Composition API reactivity out-of-the-box

Manuel Ojeda — Tue, 12 May 2020 17:24:37 +0000

One of the features that Vue Core Team promises us from the upcoming Vue 3 is the reactivity out of the box and this is possible thanks to the freshly new Composition API proposed from Evan You. But you may be wondering how is this possible? I'll teach you a basic example on how you can use this feature using the OOP paradigm.

Setting up the project

Firstly let's create a new basic project from the Vue CLI just to have a quick project in our hands:

vue create basic-reactivity-project

And select the first option:

default(babel, eslint)

Once the project is created let's install Vue Composition API plugin using:

cd basic-reactivity-project
npm install --save @vue/composition-api

After the instalation, open your project in you text editor of your preference, in my case with VS Code.

Open up the src/main.js and add Composition API into your Vue project, your file should looks like this:

import Vue from 'vue'
import CompApi from '@vue/composition-api' // <-- We need to import it just after Vue import
import App from './App.vue'

Vue.use(CompApi) // And use it like a normal plugin

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

The setup is now ready!

Building up a basic Class

Let's create a basic Class inside src/classes named Foo.js and inside the file make you to put this code:

import { ref } from '@vue/composition-api' // We just need to add the ref Reactivity system from Composition API

class Foo {
  bar; //Normal property using a OOP approach

  constructor () {
    this.bar = ref('Foo') // Initialize the variable using the ref from Vue
  }

  // This getter function goes into our component and we need to pass the bar property inside an object to make this possible
  getter() {
    return {
      bar: this.bar
    }
  }

  // This method is only for example to see that the reactivity works
  handleForm() {
    console.log(
      this.bar
    )
  }
}

export default Foo

Preparing the App.vue as a Composition API component

We need to make some few changes to make sure the component uses this new API, so let's change the code with this:

<template>
  <div id="app">
    <input type="text" v-model="form.bar">
    <button @click="handleForm">Click me</button>
  </div>
</template>

<script>
// We need to call the ref once again to make sure the reactivity works in our component
import { defineComponent, ref, onMounted } from '@vue/composition-api'
import FooClass from './classes/FooClass'

export default defineComponent({
  name: 'App',
  setup () {
    // This const will receive the object from the class
    const form = ref({})

    // The class wrapper
    const service = new FooClass()

    // Just a handler
    const handleForm = () => {
      // Calling the handler from the class
      service.handleForm()
    }

    onMounted(() => {
      // Here is where the magic happends, we set the value into the form variable from the Foo class
      form.value = service.getter()
    })

    return {
      form,
      handleForm
    }
  }
});
</script>

And with this we have the project ready, and we need to run: npm run serve.

Previewing the results

If we followed this guide, we should see in our browser the next image:

If we type in the input we can see the normal reactivity works as intended, but if you press in Click me we can see that this property works too inside the class, and will show us the actual value without passing the value in any function created from the class, the Reactivity works outside of Vue!!!!

Since I saw this possibility my mind melted, so I ask to you, are you interested in what is coming in Vue 3? Let's talk about it in the comment section.

You can check this project in this repo: https://github.com/manuelojeda/vue-out-of-the-box

Typescript: Basic types

Manuel Ojeda — Sat, 02 May 2020 01:37:03 +0000

As we saw in the first entry of this series why is important to consider TypeScript in your development, we are going to check the features needed to understand how this JavaScript superset works. In this entry we are going to learn what are the most basic types in TypeScript, which they are:

Boolean
Number
String
Array
Any
and many more...

Booleans

This is the most basic type which is onlt two values possible: true or false. How to declare a boolean type? Pretty ease actually:

let myFlag: boolean = true

// After doing this you can make all the usual uses for a boolean variable, with the only difference that you can't redeclare the type value as we saw before.

myFlag = 'true'
// TypeSciprt will alert that this is impossible because myFlag is a boolean type and not an string type

Number

As the name says, this is a number type that can assign: integers, floating point, hexadecimal, decimal, octal and binaries values. By assigning the number type, if you are using VS Code you can access into all the functions and methods available to the number type thanks to the Intellisense feature.

String

String types are the usual variables to use a paragraph, URL, etc, values given into our variable. We can set an string type by using ', "" and string literals. Which the string template we can use variables inside as we usually do in JavaScript (a demostration that TypeScript is still JavaScript).

Array

Arrays are a particular case in TypeScript because there two ways to declare an array variable. To set this type we need have to

// We can set this variable like this:
const myArray: number[] = []

or

const myArray: Array<number> = []

And we can access all the functions available for the array type:

This particular type is special because if we declare an array of type as we can see at the previous example, we can't add another value type into the array, and if you try, Intellisense will alert you that is forbidden:

Any

This is a very special type because this one can make all the previous types available, like if were using normal JavaScript. We can set a number type and later change it into a boolean type and so on, so be careful to use this type because this one release one of the security features from TS. Also, if you set an array of any types you can add wharever you want into the array without any restriction.

As we can see, the Intellisense from VSCode didn't alert me by changing the value of an any var, of by adding any var type into the array.

Conclusion

As we saw in this post, declaring a type isn't hard to do and is a helpful feature within the development. In my personal point of view this can saves you from doing a mistake during the development of a product. I know a professional JavaScript dev won't make that mistake but we aren't excent from doing a mistake, so if we can have this can of help, is a welcome one. I invite you to join into TypeScript, you will enjoy learning this beautiful JavaScript super power.

Why use TypeScript for web development?

Manuel Ojeda — Wed, 29 Apr 2020 00:57:40 +0000

Why use TypeScript for web development?

In the recent years there is a debate between if JavaScript needs or not the typing being a standard in the code. If we see the State of JS (JavaScript Flavors), TypeScript has gained a lot of popularity in the recent years giving at least 50+% of devs users being happy and determinated to use this superset of JavaScript in the future.

What is TypeScript?

Typescript borns from Microsoft as an extension of JavaScript which main objective is adding the type support to JavaScript.
Let's be clear, TypeScript isn't another new language you need to learn, is still JavaScript but with superpower following the EcmaScript standard, so don't need to be worried if your code won't work or not in a old broswer.

Let's think in the next example

Some basic TypeScript

let foo = true

// some code later

foo = 3.1416

if (foo === true) {
  // more code needed but it wont get in and your app is broken now
}

As you see we have a foo const with a boolean value but for some ready you change it into a number, after that your app is broken because a condition needed it won't work after that change and can be unnoticed (every one of us suffered for this), so, what is TypeScript adding to avoid this issue? Let's find out:

// We add the value type by adding : after the var name, in this case is <varName>: <type>
let foo: boolean = true

// some code later

foo = 3.1416
// here TypeScript will alert you saying that you can't assign a number type value into a boolean type, of course we need to remove this line to successfully continue developing

if (foo === true) {
  // your code will be executed safely!
}

So, what TypeScript offers?

Of course is not only about typing but we can say is one of the biggest features, TS has a lot of features that makes your project modular and easy to maintain, and I can say with all certain no neccesity of adding too much documentation into the code because is almost self explained.

TypeScript offers:

Basic Types (number, boolean, string, array, etc)
Interfaces
OOP Classes
Generics (this one is super powerful that we are going to check in a future post)
Enums
and many more

If you wants to learn TypeScript you can check the documentation and there are some many platforms teaching you how to TypeScript like PluralSight and Platzi (for spanish speakers)

Pass Laravel data into a Vue component without using any HTTP request

Manuel Ojeda — Tue, 21 Apr 2020 22:37:20 +0000

As you know, passing information between the backend and the frontend we usually make some HTTP request to fetch that data into our application (Vue, Angular, React, VanillaJs, etc) and that add an extra load time in rendering initially our app.
If you are a Laravel and Vue dev we have some good news, you can pass data between your Laravel Controller and the Vue component without doing any initial HTTP request by following some easy steps.

Preparing the project

Let assume you have a fresh new Laravel project, in case you haven't just run:

laravel new vue-basic

After we have our project ready we need to run one more command to have the posibility to add the frontend without any complication and using the recommended guidelines from Laravel:

composer require laravel/ui

// the run this one to add Vue into our project:
php artisan ui vue

// And finally run
npm install

Getting some basic stuff from our controller

For this example let's make a basic example using Guzzle/HTTP which is the HTTP Client Laravel is using with the latest version, I know at the title I said without doing a HTTP request but for this example i'm using an API to get some data but this works perfectly if you are fetching data from your database using Eloquent, and i'm using the well known Rick n Morty API.

Create a controller using

// No other flag is needed
php artisan make:controller BasicController

After that invoke the Http request file here

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Http; // <--- This line is needed for this example

class BasicController extends Controller

Now we need to create our function that will be connected into our route, in this case i'll use an index function

public function index ()
{
  // Code goes here
}

Now we need to retrieve our data:

public function index ()
{
  // Fetching the Rick n Morty data here, we need to convert it into json to get the response from the server
  $api_data = Http::get('https://rickandmortyapi.com/api/character/')->json();

  // Then we send our data to the view
  return view('home')
    ->with('api_data', $api_data);
}

A this point our controller should look like this:

<?php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Http;

class BasicController extends Controller
{
  public function index()
  {
    // Fetching the Rick n Morty data here, we need to convert it into json to get the response from the server
    $api_data = collect(Http::get('https://rickandmortyapi.com/api/character/')->json()['results']);

    // Then we send our data to the view
    return view('welcome')
      ->with('api_data', $api_data);
  }
}

Building a basic Vue component

We need to create a component that will be the one responsible to get the data from our view blade.php file. To this go into /<project_root>/resources/js/components/ and create a component with any name you want to give, in my case will be Basic.vue, then add the next code into your newly created component:

<template>
  <div>
    <!-- Add a v-for cycle to show the retrieved data -->
    <ul>
      <li
        v-for="character in apiData"
        :key="character.id"
      >
        {{character.name}}
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'Basic',
    props: {
      apiData: {
        type: Array,
        required: true
      }
    }
  }
</script>

And don't forget to call this component at app.js adding this:

Vue.component('basic-component', require('./components/Basic.vue').default);

and run npm run watch, we need to have the development mode activated to see the data at the component in our browser.

Connecting everything

Now that we have our controller and component ready let's connect everything. First we need to connect in our route file the controller we made before

<?php

use Illuminate\Support\Facades\Route;

Route::get('/', 'BasicController@index');

Then we go into our welcome.blade.php and rebuild the html code like this:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>
    </head>
    <body>
        <div id="app">
          <!-- Magic happens here! -->
          <basic-component :api-data="{{$api_data}}"></basic-component>
        </div>
        <script src="{{ asset('js/app.js') }}"></script>
    </body>
</html>

If we followed this post correctly we will have something like this in our display:

And if we check in the Vue Dev Tools we will have all data ready to be handle as needed, and no any extra step required to have this possible without using Axios or Fetch

And here we are, our small example is done. What do you think in this way in getting information from Laravel Controller without using any HTTP Request needed? I hope this help you in the future, and

Vue 3.0 Beta released

Manuel Ojeda — Thu, 16 Apr 2020 20:02:15 +0000

Today the Vue Team released the beta for the 3.0 version, you can check out the release changelog here:

https://github.com/vuejs/vue-next/releases/tag/v3.0.0-beta.1

Note: Evan remarked to don't use this version in production or critical apps yet!

// Detect dark theme var iframe = document.getElementById('tweet-1250875642830303233-823'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1250875642830303233&theme=dark" }

Setup your VSCode as PHP code editor/IDE

Manuel Ojeda — Fri, 21 Feb 2020 21:19:31 +0000

As you know VSCode became a so popular text editor which can be tuned up to any language development (JavaScript, C, C#, Java, Go, Python and many more). In this post we are going to setup one of the popular backend language, I'm talking about PHP.

Requirements

If you are a Windows user, you can skip installing PHP and Composer in a single step using Laragon, in case you are Linux/MacOS you can follow this guide: https://dev.to/manuelojeda/setup-a-php-dev-enviroment-with-laravel-valet-and-wsl-1pp6

After you have installed all the things mentioned, I suggest you to install this extension in your VSCode:

Settings Sync

This one will let you bring your VSCode configuration anywhere you need it, only vinculate your GitHut account and you are ready to go:
https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

After having all of this installed let is begin with the dance.

Settings at VSCode

First of all, let's tell VSCode where is the PHP Path is. Go to Settings and type php at the search bar, then look for the section; PHP › Validate: Executable Path then click in Edit in settings.json:

Once you have opened, look of the line that it says: "php.validate.executablePath". If you have it, make sure your php installation path is there, in case you haven't add this rule to your settings.json:

In Linux and Mac should be:

"php.validate.executablePath": "/usr/bin/php"

In Windows should be:

"php.validate.executablePath": "c:/Program Files/php/php.exe"

After doing this preparation you are ready to install and make your VSCode be ready to do some PHP code, let's roll!

Extensions

PHP IntelliSense

What this extension does is giving some help depending on what version of PHP you have installed (at least PHP 7) giving you the autocompletition that Intellisense do in Visual Studio.

PHP Namespace Resolver

This is extension give you the posibility to auto add a Class from another file with few steps and without the necessity of tiping it at the beginning of your PHP file:

Credtis to the author: Mehedi Hassan

phpcs

This extension linter you code and tells you what you need to have an overall standar for a PHP code made. Follow up the installation guide and enjoy having a PHP linter in VSCode.

Laravel Blade Snippets

This extension gives you some helpful snippets when you are coding some blade files for the views of Laravel.

Composer

This provides an interface to manage your Composer dependencies and validates your composer.json config file

Conclusion

With these extensions your PHP development will be boosted greatly and make Visual Studio Code a great free alternative in the market. I hope this post was helpul to you and I wish to you good luck in the path.

Moving to Ubuntu. A Windows developer point of view

Manuel Ojeda — Mon, 10 Feb 2020 21:42:18 +0000

Hi guys, in this post I wanted to share with you my development experience from a Windows point of view and, why I decided to move to Linux (Ubuntu).

Prologue

I being developing since 2015 using Windows as a primary OS. Normally I do some development of PHP Web App's, and as some of you know, doing PHP in Windows can be a kind of tedious. Started using the old WAMPP, then moved to XAMP and so on until I started doing Laravel with Laragon apps since at the end 2017.

In my experience Windows is such a great OS (Windows 10 is such a complete OS that let you do a lot of stuff, even using Linux with WSL, I'll board that point later), of course is intended for mainstream use, common uses like listening music, watching movies, doing some paperwork with Office, etc. etc. But at as developer can be a little tedious setting a proper development enviroment, since installing the right tool, seeking a proper compatibility with the Operative System etc etc.

After some point you can make this possible, you have installed what you need but then the main Windows issue comes to life, the OS starts being too slow, the startup takes too much time, of course you can solve this installing an SSD which is common at this time but before at 2015's was a new thing in the hardware topic.

Windows 10 and WSL comes to the searchlight

As I mentioned before, Windows 10 came with a lot of great thing as a developer, the developer experience got a new life, why? Because Microsoft did the unthinkable, added Linux support with WSL (Windows Subsystem for Linux) but once again the performance over time degrades at that point this can be slower than using the native OS.

The main problem with WSL is that sometimes trend to freeze when executing a task, since a simple npm install <something> can take more time that doing it native (Windows or Linux). Also, some PHP extensions can't be used in Windows because there is no working approach, this happened to me after started working with a Laravel project that was developed using Ubuntu, found out that a specific PHP extension was needed and there is no Windows solution for that.

So then I started using Laravel Valet WSL, you can check an installation guide here and the development was fluid, no problem at all, just some server restart after starting the WSL when you recently started up your PC because you get a 502 error that can be fixed using valet restart. But the freezing keep coming sometime along. So decided to try a native Linux approach.

Decided to try Ubuntu

After meditating a lot of time I decided to move to Ubuntu, I was using Ubuntu WSL version for 1 year long and I had the confidence to move into a new Operative System since I was using the Ubuntu CLI and lost the fear we have most of the time using Linux. Yes, that fear that make you think you can break something using the Linux Console Bash, and if you break something, there is no problem, at least you learned something from that.

The only thing I had to be careful was not to destroy the Windows installation in my workstation. I'm using a PC that became with a preinstalled Windows 10 and with one HDD only, so my fear was if the Windows install became rogue, with my luck and this tutorial there was no problem at all.

Then started installing everything I needed to start developing:

PHP 7.2
Laravel Valet
Node.js
ZSH
etc.

I noticed a bigger performance, more efficient installation and didn't take too much setting my development enviroment (maximun 3 hours) and I was amazed with this result. But of course you may ask, what happens with all the Windows products that doesn't works in Linux?

There are Adobe XD alternatives, you can try anoter approches like Figma which is a great UI design tool. Or GIMP as a Photoshop alternative, this one is pretty powerfull.

I give you an invitation to try Linux (doesn't matter what distro did you choose), it will give you a great developer experience and performance, also doesn't need too much resources from your computer, which is nice now a day.

JetBrains Mono: A free and open source typeface for developers

Manuel Ojeda — Thu, 16 Jan 2020 17:18:52 +0000

Today the team from JetBrains release a new Mono font named JetBrains Mono.

You can check the font right here: https://www.jetbrains.com/lp/mono/