Personal Knowledge Management

Official Core Web Vitals:

• LCP (Largest Contentful Paint): How long it takes for the biggest visible part of the page (like a large image or headline) to appear.
• INP (Interaction to Next Paint): How quickly the page responds visually after you interact with it (like clicking a button).
• CLS (Cumulative Layout Shift): How much the page layout unexpectedly moves around as it loads (less is better).

Important web performance metrics:

• FCP (First Contentful Paint): How long it takes for the first piece of content (text or image) to show up on the screen.
• TTFB (Time to First Byte): How long it takes for your browser to get the first response from the server after you request a page.

Popular Chrome extensions for Web Vitals measurements:
https://chromewebstore.google.com/detail/core-web-vitals-visualize/mcffmgagphgpgkdclllnilokablhjcge

https://chromewebstore.google.com/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?pli=1

Ctrl+Shift+I, then Ctrl+Shift+P, inside “Run > type in “Capture full size screenshot”

GPT-4.1: Best for coding, reasoning, and creativity. Widely integrated and especially strong at code.
Claude Sonnet: Best for summarization, handling long documents, and safety. Handles big files and is privacy-focused
Gemini: Best for research and Google integration. Good with facts and works well within the Google ecosystem

React/Next.Js/Javascript page

const currency = €;
const { t } = useTranslation();
<Trans
 t={t}
 i18nKey={'Path.To.Mykey'}
 components={{
  customspantorender: <Customspan currency={currency} />,
 }}
/>

Customspan.tsx

import React from 'react';
 
const Customspan = ({ currency }) => {
const amount = 15.99;
  return (
   <span>{currency} {amount}</span>
  );
};
export default Customspan;

sample.json

"Path": {
  "To": {
    "Mykey": "(Amount = <customspantorender>€€€</customspantorender>)"
  },
}

301 – Permanently Move (Simple Redirect Post plugin does this)
302 – Temporarily Move
307 – Temporarily Redirect

Initial configuration:

Laravel 7.x folder: /var/www/laravel

Next.Js folder: /var/www/public_html

Step 1. Add your api response to laravel

Add to /var/www/routes/web.php

Route::get('/', [
   'uses' => 'IndexController@categories',
]);

Add to /var/www/app/Http/Controllers/IndexController.php

public function index() {
  return response()->json(['Hello world']);
}

Step 2. Add api/ folder to Next.Js public folder. Don’t touch existing Next.Js static html files

Move /var/www/laravel/public/index.php to /var/www/public_html/api

Then edit it, change the following:

require __DIR__.'/../vendor/autoload.php';
to 
require __DIR__.'/../../laravel/vendor/autoload.php';

$app = require_once __DIR__.'/../bootstrap/app.php';
to
$app = require_once __DIR__.'/../../laravel/bootstrap/app.php';

Move /var/www/laravel/public/.htaccess to /var/www/public_html/api, no need to edit it

Finally

Try to access your domain.com/api. It should work

1. Go to the Keychain Access app  on your Mac.To open Keychain Access, search for it in Spotlight, then press Return.
2. Click “login” in the Keychains list.
3. Choose Edit > Change Settings for Keychain “login”.
4. Find the “Lock after” tickbox, then untick the box.
5. However: if you want to require a password if keychain password is out of sync
6. However: If you want to require a password each time the computer goes to sleep, select the “Lock when sleeping” tickbox.
7. Click Save.

Source: https://support.apple.com/en-ie/guide/keychain-access/kyca1242/mac