Mick Redman: 2023

Monday, 11 December 2023

Friday, 1 December 2023

Advanced Brave Search cheat sheet.

See here.

Tuesday, 28 November 2023

Revisit "How to make the entire page fade in on load" using Vue.js

index.html

<!DOCTYPE html>

<head>

</head>

<body>

<h1>Hello World!</h1>

</transition>

</body>

</html>

style.css

.fade-enter-active,

.fade-leave-active {

transition: opacity 1s;

}

.fade-enter-from,

.fade-leave-to {

opacity: 0;

}

app.js

const app = Vue.createApp({});

app.mount("body");

Revisit "Simple tab navigation using jQuery" using Vue.js

This is the first of a series in which I revisit old blog posts which made use of JavaScript and jQuery. I attempt to implement them, this time using Vue.js in order to improve my Vue.js skills.

First up is one from 2010 titled Simple tab navigation using jQuery.

index.html

<head>

<title>Tabbed Navigation</title>

body {

font-family: Sans-serif;

}

#subSystem {

margin: 0 auto;

width: 400px;

}

#subNav a.subMenu {

display: block;

text-decoration: none;

float: left;

text-align: center;

width: 5rem;

height: 2.5rem;

padding-top: 1rem;

border-top: 0.0625rem solid #ccc;

border-left: 0.0625rem solid #ccc;

border-right: 0.0625rem solid #ccc;

color: #000;

}

#subNav a.subMenu:hover {

background: #a3a3a3;

color: #fff;

}

.menuSelected {

background: #ccc;

color: #fff;

}

#subContent {

clear: left;

min-height: 25rem;

height: 25rem;

border: 0.0625rem solid #ccc;

}

</style>

</head>

<body>

<a class="subMenu menuSelected" click="loadContent" href="./subPage1.html">First</a>

<a class="subMenu" click="loadContent" href="./subPage2.html">Second</a>

<a class="subMenu" click="loadContent" href="./subPage3.html">Third</a>

</div>

</div>

</body>

</html>

app.js

const app = Vue.createApp({

methods: {

loadContent(event) {

event.preventDefault();

const href = event.target.getAttribute("href");

fetch(href)

.then((response) => response.text())

.then((data) => {

document.getElementById("subContent").innerHTML = data;

})

.catch((error) => {

console.error("Error loading content:", error);

});

mounted() {

// Simulate a click on the first tab when the page loads

const firstTab = document.querySelector(".subMenu.menuSelected");

if (firstTab) {

firstTab.click();

}

});

app.mount("#subSystem");

Thursday, 23 November 2023

Node Package Manager (NPM) Cheat Sheet

See here.

Object-Oriented Programming (OOP) cheat sheet

See here.

New stuff on the EWD website

Today, I added some content to the Effective Web Designs (EWD) website.

I created it as a Laravel site.

The site has a simple search form.

It pulls content from this blog using the Blogger API.

It makes suggestions through the blog entry title for the next step, and allows the user to select one of those titles.

Once a title has been selected, it is used to provide results from the Brave search API.

The results are also links.

See the code for this site on GitHub.

Tuesday, 18 April 2023

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!