Design Patterns cheat sheet

See here.

CSS cheat sheet

 See here.

Craft CMS cheat sheet

See here.

Chat GPT cheat sheet

See here.

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