JavaScript fetch, VS Code, CORS, Debugging and curl

I've recently been trying to use the Pocket API to bring my favourite links into a page. Naturally, I was starting from a position of testing it on localhost. I've also been using VS Codium, which has improved on Ubuntu. I use the Brave browser and so was looking to make use of this in my debugging.

So first things, first I needed to get debugging happening in VS Codium using Brave on Ubuntu. As you try and run the debugger, you have the option to create a launch.json file for your project. Here, I selected to create a Chrome web app. Once the launch.json was created, I edited it with the following, in order that the debugger used Brave:

{

    "version": "0.2.0",

    "configurations": [

        {

            "type": "chrome",

            "request": "launch",

            "name": "Brave",

            "runtimeExecutable": "/opt/brave.com/brave/brave-browser",

            "userDataDir": true,

            "url": "http://localhost:5500",

            "webRoot": "${workspaceFolder}",

            "runtimeArgs": ["--disable-web-security"]

        }

    ]

}

I the setting "--disable-web-security" fixed the CORS problem commonly faced such as,

Access to fetch at ‘http://localhost:8000/api/v1/messages’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

The final issue I encountered was the code itself. I'd successfully retrieved the data I was looking for using curl, but converting the curl command to a JavaScript fetch was problematic. I then came across this page which helped.

Now we're cooking!

Learn to code

 As the world of work changes, people who have worked in industries which now have fewer jobs are often give the catchphrase "Learn to code". This is because, while their industry has fewer jobs, there's always plenty of work in coding.

Of course coding is not for everyone, even coders themselves find it difficult sometimes. Coding is quite a broad subject area, certainly since the growth of the Internet. Some of the people who find themselves out of work may conclude, "OK, I'll give this coding a try". Now they are faced with "What is coding?", or better still, "What would I enjoy coding?".

I have devised a framework, which can help someone answer those questions for themselves. It contains a little pain (but not too much) in the setup. It provides a little documentation to push them in a useful direction, without doing all the learning for them.

You can find it here:

https://github.com/guitarbeerchocolate/learn-to-code-environment

Git branch in Ubuntu terminal

This is the code I added to ~/.bashrc around line 59. It affects the CLI prompt in the Ubuntu terminal in a number of ways.

1. It removes the username and computer name.
2. It adds the open Git branch, if one exists.
3. It adds a new line at the end, because some path's get very long, and don't give you much room to add your commands. 

parse_git_branch() {

 git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/(\1)/'

}

if [ "$color_prompt" = yes ]; then

 PS1='${debian_chroot:+($debian_chroot)}\[\033[01;32m\]\[\033[01;34m\]\w\[\033[01;32m\] $(parse_git_branch)\[\033[00m\]\n$ '

else

 PS1='${debian_chroot:+($debian_chroot)} $(parse_git_branch)\n$ '

fi

Running XDebug version 3 in VSCodium (or VS Code)

First of all, this is not a tutorial on how to setup XDebug in your PHP environment. It assumes you've already done that.

This is my .vscode/launch.json

{

    "version": "0.2.0",

    "configurations": [

        {

            "name": "Xdebug Browser",

            "type": "php",

            "request": "launch",

            "runtimeArgs": [

                "-dxdebug.mode=debug",

                "-dxdebug.start_with_request=yes",

                "-S",

                "localhost:5500"

            ],

            "program": "${file}",

            "cwd": "${workspaceRoot}",

            "port": 9003,

            "serverReadyAction": {

                "pattern": "Development Server \\(http://localhost:([0-9]+)\\) started",

                "uriFormat": "http://localhost:%s/${relativeFile}",

                "action": "openExternally"

            }

        },

        {

            "name": "Xdebug CLI",

            "type": "php",

            "request": "launch",

            "program": "${file}",

            "cwd": "${fileDirname}",

            "port": 0,

            "runtimeArgs": [

                "-dxdebug.start_with_request=yes"

            ],

            "env": {

                "XDEBUG_MODE": "debug,develop",

                "XDEBUG_SESSION": "1",

                "XDEBUG_CONFIG": "client_port=${port}"

            }

        }

    ]

}

It allows me to debug files on the command line (CLI) and in the browser.

How to run through the CLI

First, open the "Run and Debug" tools of VSCodium from the icon on the left-hand side of the IDE.

Next add a break point in your code where you'd like the code to pause. 

Then click the play button to the right of "Xdebug CLI"

You should now have debugging tools above your code, and variables in the variables section.

How to run through a Web Browser

First, open the "Run and Debug" tools of VSCodium from the icon on the left-hand side of the IDE.

Then click the play button to the right of "Xdebug Browser"

You should now have debugging tools above your code, and variables in the variables section.

How to keep your Ubuntu laptop running with the lid closed

 I wanted to keep using my laptop running but use my external screens, mouse and keyboard.

To achieve this, you need to make the following changes to your /etc/systemd/logind.conf file:

Change the line

#HandleLidSwitch=suspend

to

HandleLidSwitch=ignore

then, change the line

#LidSwitchIgnoreInhibited=yes

to

LidSwitchIgnoreInhibited=no

You will then need to restart, and hey presto!

Useful Docker commands

Start services listed in docker-compose.yml file for the first time

docker-compose up -d

Stop services listed in docker-compose.yml

docker-compose stop

Subsequently start services listed in docker-compose.yml file

docker-compose start

Clean up services listed in docker-compose.yml file

docker system prune

Bring up all services listed in docker-compose.yml file

docker-compose up

Bring up "node" service listed in docker-compose.yml file

docker-compose up node

Clean up all services listed in docker-compose.yml file

docker-compose rm -f

Rebuild your services on restart

docker-compose up -d --force-recreate --build

Log into a container named webserver

docker exec -it webserver /bin/bash

Provide information about the running container "ubuntu".

docker inspect ubuntu

Look for containers

docker container ls
This will give you a list of CONTAINER ID's.

Remove containers

docker container rm -f <CONTAINER ID>

Look for images

docker images
This will give you a list of IMAGE ID's.

Remove containers

docker rmi -f <IMAGE ID>

Look for volumes

docker volume ls
This will give you a list of VOLUME NAME's.

Remove volumes

docker volume rm -f <VOLUME NAME>

Why use PhpStorm over Atom

I'm just about to do a lot more work with PHP and I will be using PhpStorm. What's so good about PhpStorm. Below are a few examples.

Working with scratch files

New->New scratch file : Creates a file without yet including it in your project.

Refactoring

Select the variable you want to refactor.
Right-click->Refactor->Rename.
All occurrences of the variable will be renamed.

Search everything in your project

Tap the Shift button twice.

Version control

If you already have a repository, one of the options on the PhpStorm welcome screen is 'Check out from version control'. Here you can select your repository type. You will then be asked for the repository location and PhpStorm will load with your repository.
Let's assume your project uses git or Bitbucket.
When you add code to your project a new tab appears at the bottom-left of PhpStorm titled 'Version Control'. This allows you to track, stage, and commit changes.

Databases

When you open up a project which contains a database connection you can work with the database.
A tab appears at the top-right of PhpStorm titled 'Databases'. From here you can click on the '+' button and add a new connection, if the connection has not already been made.
Once the connection has been established, the 'Databases' window shows the database structue, but you also have a console window into which you can add queries such as SELECT * FROM country.
When the query results are displayed in the console, it's possible to edit the data returned.

Vagrant

First set Vagrant up in your project
Tools->Vagrant->Init in Project Root
If Vagrant is not set up on your computer a dialogue box appears asking you for configuration details of Vagrant.
If Vagrant is set up on your computer a dialogue box appears asking you for your chose Vagrant instance.
Once Vagrant has been set up you can move 'Remote Host', find a file, right-click and select 'Edit remote file'.

REST

In your project you can test RESTful web API's for your project before you add the code.
Tools->HTTP Client->Test RESTful Web Service

Emmet built in

Type a tag name followed by TAB
e.g. html:5
e.g. html>head+body