-=EmpyreaL=-: August 2022

Wednesday, August 31, 2022

SVG react-icons position and scaling problems on card

transform: scale() was not working properly. Solved this way:

import { IconContext } from 'react-icons';

import { FaPenNib, FaPencilRuler } from 'react-icons/fa';

<IconContext.Provider

value={{

color: 'grey',

size: '10rem',

className: 'svg-class',

}}

<div>

</div>

</IconContext.Provider>

https://github.com/react-icons/react-icons

Key	Default	Notes
`color`	`undefined` (inherit)
`size`	`1em`
`className`	`undefined`
`style`	`undefined`	Can overwrite size and color
`attr`	`undefined`	Overwritten by other attributes
`title`	`undefined`	Icon description for accessibility

Node Sass does not yet support your current environment

Node Sass does not yet support your current environment: Linux 64-bit with Unsupported runtime (108)

npm rebuild node-sass // in application folder

rebuilt dependencies successfully // Worked out on Kubuntu Linux.

Tuesday, August 30, 2022

Black contact form code for React

Card code examples for React

import React, { Component } from 'react';
import { Grid, Card, Icon, Image, Button } from 'semantic-ui-react';

export default class Class extends Component {
  constructor(props) {
    super(props);
    this.state = {
      news: [],
    };
  }

  componentDidMount() {
    const url =
      'https://newsapi.org/v2/top-headlines?country=us&apiKey=
d5cf45043cd34b59b432df10e3cef274';
    fetch(url)
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        this.setState({
          news: data.articles,
        });
        console.log(data);
      })
      .catch((error) => {
        console.log('error while trying to retrieve data');
      });
  }

  renderItems() {
    return this.state.news.map((item) => (
      <Card.Group>
        <Card
          image={item.urlToImage}
          header={item.author}
          meta={item.url}
          description={item.description}
        />
      </Card.Group>
    ));
  }

  render() {
    return <Grid.Row>{this.renderItems()}</Grid.Row>;
  }

}

Button code examples in React

import { Link } from 'react-router-dom';

export default function BtnContact() {
  return (
    <Link to='/' id={'contact'} className={'btn'}>
      Contact
    </Link>
  );
}

import './btn.scss';

const Button = (props) => {
  const btnEnableDisable = !props.isDisabled ? 'btn-enable' : 'btn-disabled';

  return (
    <button
      className={`btn btn-primary ${btnEnableDisable} ${props.className}`}
      id={props.id}
      type={props.type}
      value={props.value}
      onClick={props.onClick}
      disabled={props.isDisabled}
    >
      {props.content}
    </button>
  );
};

Button.defaultProps = {
  type: 'button',
  className: 'btn',

  disabled: false,
};

export default Button;

https://stackoverflow.com/questions/42463263/wrapping-a-react-router-link-in-an-html-button

Using the latest hooks from react-router v6, this can now be done easily with the useNavigate hook.

import { useNavigate } from 'react-router-dom'

function MyLinkButton() {

const navigate = useNavigate()

return (

<button onClick={() => navigate("/home")}>

Go Home

</button>

);

}

https://codesandbox.io/s/dczs4?file=/src/Components/common/Button/style.css

https://bobbyhadz.com/blog/react-button-link

https://blog.logrocket.com/react-icons-comprehensive-tutorial-examples/

https://stackoverflow.com/questions/41080481/in-reactjs-how-to-invoke-link-click-via-button-press

https://stackoverflow.com/questions/52697730/button-with-icon-component

https://www.codegrepper.com/code-examples/javascript/how+to+add+link+to+button+in+react+js

https://chayanit-chaisri.medium.com/react-create-a-show-more-less-button-aa0e9cd0f927

https://www.pluralsight.com/guides/how-to-implement-a-read-more-link-in-react

Carousel slide show for React website

https://flowbite.com/docs/components/carousel/

https://www.npmjs.com/package/react-multi-carousel

https://blog.openreplay.com/build-an-elegant-gallery-with-react-responsive-carousel

https://www.npmjs.com/package/react-image-gallery

import './styles.css';

export default Component;

@tailwind base; // => index.css

@tailwind components; // => index.css

@tailwind utilities; // => index.css

tailwind.config.js

/** @type {import('tailwindcss').Config} */

module.exports = {

content: ['./src/**/*.{html,js,jsx}'],

theme: {

extend: {},

plugins: [],

};

Sunday, August 28, 2022

Design elements and components for React

https://redux.js.org/

https://reactrouter.com/en/main

https://mui.com/

npm install semantic-ui-react semantic-ui-css --save-dev

https://react.semantic-ui.com/

https://react-bootstrap.github.io/

https://tailwindcss.com/docs/guides/create-react-app

npm i react-icons --save-dev

https://react-icons.github.io/react-icons/icons?name=bs

https://react-icons.github.io/react-icons/icons?name=fa

https://github.com/react-icons/react-icons#configuration

import { IconName } from "react-icons/ai"; //Ant Design Icons

import { IconName } from "react-icons/bs"; //Bootstrap Icons

import { IconName } from "react-icons/bi"; //Boxicons

import { IconName } from "react-icons/di"; //Devicon Icons

import { IconName } from "react-icons/fi"; //Feather 

import { IconName } from "react-icons/fc"; //Flat Color Icons

import { IconName } from "react-icons/fa"; //Font Awesome Icons

import { IconName } from "react-icons/gi"; //Game Icons

import { IconName } from "react-icons/go"; //Github Octicons Icons

import { IconName } from "react-icons/gr"; //Grommet-Icons

import { IconName } from "react-icons/hi"; //HeroIcons

import { IconName } from "react-icons/im"; //IcoMoon Free

import { IconName } from "react-icons/io"; //Ionicon4

import { IconName } from "react-icons/io5"; //Ionicon5

import { IconName } from "react-icons/md"; //Material Design Icons

import { IconName } from "react-icons/ri"; //Remix Icons

import { IconName } from "react-icons/si"; //Simple Icons

import { IconName } from "react-icons/ti"; //Typicons

import { IconName } from "react-icons/vsc"; //VS Code Icons

import { IconName } from "react-icons/wi"; //Weather Icons

import { IconName } from "react-icons/cg"; //css.gg

https://www.freecodecamp.org/news/how-to-use-react-icons/

https://dev.to/ebereplenty/react-icons-tutorial-all-you-need-to-know-524

https://fontawesome.com/v5/docs/web/use-with/react

https://blog.logrocket.com/react-boilerplates-for-2021/

Create a New React App

npx create-react-app my-app-name

npm i node-sass --save-dev

npm i react-icons --save-dev

cd my-app || code . to open VS Code in current directory

npm start

https://reactjs.org/docs/create-a-new-react-app.html

npx create-react-app my-app-name --use-npm // react react-dom, webpack, Babel, CSS Modules are preconfigured and hidden in this package

Error: error:0308010C:digital envelope routines::unsupported

"start": "react-scripts start" => "start": "react-scripts --openssl-legacy-provider start"

npx create-react-app my-app

npm start

Starting the development server...

Error: error:0308010C:digital envelope routines::unsupported

npm high severity vulnerabilities

npm audit

npm audit fix

npm audit fix --force

npm update

npm upgrade

Saturday, August 27, 2022

Key React features and concepts

props - parameters in functional component.

children of props are <div>here</div>.

State - a built-in React object that is used to contain data or information about the component. A component's state can change over time; whenever it changes, the component re-renders.

State in App (parent component) passes this.state to other (child) components on page.

State storage.

Components lifecycle - https://reactjs.org/docs/state-and-lifecycle.html

1 component - 1 function => ideally.

Functional component gets props and just render HTML. If internal state or lifecycle are not necessary, functions are way to go.

Put context for all methods into constructor. // this.change = this.change.bind(this) or use arrow function because it automatically get lexical scoping.

{} // everything in curly brackets is JavaScript expression

Unique keys are needed to update certain component ONLY and not rerender whole page.

APIs for getting information.

const { users, searchField } = this.state; // destructuring state and making const variables out it's data

React Class Components

import React, { Component } from 'react';

import { SearchBox } from './components/searchbox/searchbox.component';

import './App.css';

class App extends Component {

  constructor() {

    super(); // calls constructor method on component class

    this.state = { // default app values

      workers: [],

      searchField: '',

    };

  }

  componentDidMount() {

    fetch('https://jsonplaceholder.typicode.com/users')

      .then((response) => response.json())

      .then((users) => this.setState({ workers: users }));

  }

  onSearchChange = (e) => {

    this.setState({ searchField: e.target.value });

  };

  render() {

    const { workers, searchField } = this.state;

    const filteredWorkers = workers.filter((worker) =>

      worker.name.toLowerCase().includes(searchField.toLowerCase())

    );

    return (

      <div className='App'>

        <h1>Workerss List</h1>

        <SearchBox

          placeholder='search workers'

          onSearchChange={this.onSearchChange}

        />

        <CardList workers={filteredWorkers} />

      </div> // anything in {} is JavaScript expression

    );

  }

}

export default App;

https://www.w3schools.com/react/react_class.asp

https://reactjs.org/docs/react-component.html

https://reactjs.org/docs/hooks-intro.html

ReactDOM.render is no longer supported in React 18

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it’s running React 17

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Change to:

import React from 'react';
import { createRoot } from 'react-dom/client';

import './index.css';
import App from './App';

const container = document.getElementById('root');
const root = createRoot(container);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

import { createRoot } from 'react-dom/client'

createRoot(document.getElementById('root')).render(<h1>Your App</h1>)

Visual Studio Code Settings

Ctrl + ,

Editor: Bracket Pair Colorization => checked

Editor: Default Formatter => Prettier

Editor: Format On Save => checked

Editor: Font Size => 14

Editor: Linked Editing => checked

Editor: Tab Size => 2

Prettier: Tab Width => 2

Prettier: Single Quote => checked

Emmet: Trigger Expansion On Tab => checked

Window: Zoom Level =>1.5

Best Visual Studio Code extensions

Code Spell Checker

CSS Flexbox Cheatsheet

CSS Peek

ESLint // sudo npm install eslint -g // https://www.youtube.com/watch?v=5IGVeq2DdsA

Image preview

Import Cost

IntelliCode

Prettier

SFTP

Sass - useless

HTML CSS Support - useless

Indent-Rainbow - useless

IntelliSense for CSS class names in HTML - useless

Debugger for Chrome - deprecated

Debugger for Firefox - useless

Auto Close Tag - obsolete use Editor: Linked Editing

Auto Rename Tag - obsolete use Editor: Linked Editing

HTMLhint - deprecated - use A Static Code Analysis Tool for HTML

Live Sass Compiler - USE npm run watch:sass

Live Server - USE sudo npm install live-server -g // live-server - in terminal

Lorem Ipsum - obsolete use Emmet: Trigger Expansion On Tab <div>lorem=>Tab</div>

Bracket Pair Colorizer 2 - obsolete use Editor: Bracket Pair Colorization

ES7 React/Redux/React-Native/JS snippets

React Native Tools

DotENV

C/C++ for Visual Studio Code ms-vscode.cpptools

C/C++ Compile Run danielpinto8zz6.c-cpp-compile-run

C/C++ Themes

CMake Tools

Doxygen Documentation Generator // for C/C++

Most useful features in VS Code

Ctrl + Alt + T

cd app-folder

code . // open Visual Studio Code in current folder

Alt + Z // word wrap

Ctrl + B // open or close left sidebar

Ctrl + P // open files

Ctrl + \ // split Editor right

Ctrl + ` // ` on ~ key => toggle terminal

. then Tab or Enter // <div className=""></div> in JSX

Friday, August 26, 2022

Links to local pages do not work in Chrome and Firefox

e.preventDefault() method stops the default action of a selected element from happening by a user. This method does not accept any parameter and works in two ways: It prevents a link from following the URL so that the browser can't go another page. It prevents a submit button from submitting a form.

https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

git branch is behind master

git pull origin master

git push origin branch-name

git checkout master

git merge new

git checkout -b <branch-name> // create a branch and switch to the branch

git branch <branch-name> // create a branch only

https://git-scm.com/docs/git-branch

Thursday, August 25, 2022

Link SVG into web page not working

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<svg>

</svg>

</body>

</html>

Wednesday, August 24, 2022

Flexbox - most usable settings

justify-content: center // space-between // space-evenly // space-around

align-items: center //stretch // baseline

// individual item settings

align-self: stretch; // fill entire space

order: -1 // -2 etc // change order of items

flex-grow: 1 // 2 etc // increase size of item

flex-shrink: 0; // decrease size of item

flex-basis: 20% // width of individual item

.item {

flex: 0 1 30%; // flex: flex-grow, flex-shrink, flex-basis

}

Header menu functions with JavaScript

If smth do not work, check modifier in HTML and try remove it.

You really want to use position: sticky for this. Scroll events and Intersection Observers are async, and will cause elements to jump if you try to toggle their position in JavaScript (depending on device).

https://developer.mozilla.org/en-US/docs/Web/CSS/position#sticky_positioning

https://dev.to/akhilarjun/one-line-sticky-header-using-css-5gp3

'use strict';

// toggle menu

const nav = document.querySelector('.toggle__menu-btns'); // hidden menu

const navMenu = document.querySelector('.toggle__menu'); // switch on/off

const links = nav.querySelectorAll('a'); // menu buttons/links

// listen click on menu

navMenu.addEventListener('click', () => {

nav.classList.toggle('nav__open'); // transform: translateX(-100%);

navMenu.classList.toggle('toggle'); // span animation

});

// listen click on every 'a'/button

links.forEach((link) => {

link.addEventListener('click', () => {

nav.classList.toggle('nav__open'); // transform: translateX(-100%);

navMenu.classList.toggle('toggle'); // span animation

});

https://webdesign.tutsplus.com/tutorials/how-to-hide-reveal-a-sticky-header-on-scroll-with-javascript--cms-33756

Tuesday, August 23, 2022

BEM methodology in CSS SASS

https://dev.to/visuellverstehen/common-mistakes-when-writing-css-with-bem-4921

https://css-tricks.com/bem-101/

https://blog.logrocket.com/bem-vs-smacss-comparing-css-methodologies/

npm packages list in terminal

node -v

sudo apt install npm

npm list -g --depth 0 // list globally installed packages

npm list // list all packages installed in pwd

touch npm_globals.txt

nano touch npm_globals.txt

eslint@8.22.0

live-server@1.2.2

node-sass@7.0.1

npm-run-all@4.1.5

< npm_globals.txt xargs npm install -g

const { execSync } = require('child_process');

const fs = require('fs');

const package = JSON.parse(fs.readFileSync('package.json'));

let keys = Object.keys(package.dependencies);

let values = Object.values(package.dependencies);

for (let index = 0; index < keys.length; index++) {

const key = keys[index];

let value = values[index].replace("~", "").replace("^", "");

console.log(`Installing: ${key}@${value} globally`,);

execSync('npm i -g ' + `${key}@${value}`);

}

Remove unused mount point and loop

sudo rmdir /path/to/mount/point

mount

ls -la /media/user

lsblk

lsusb

sudo fdisk -l

sudo hdparm -i /dev/sda

sudo hdparm -I /dev/sda

sudo hdparm -Tt /dev/sda

cp -r -u /home/user/Documents/folder1 /home/user/Downloads/folder1

Don't care about loops.

A loop device, or it can be termed as vnode disk (vnd), and loopback file interface (lofi) is a device that helps the computer file to access block devices. Before using the dev loop, the existing file in the file system must be connected to it.

Monday, August 22, 2022

Install and compile SASS with npm

npm start // error in Visual Studio Code integrated bash - run separately

sudo apt install nodejs

sudo apt install npm

sudo npm install live-server -g

live-server // in project folder to see changes real-time

sudo npm install node-sass -g // install globally and add to dependencies

npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.

npm WARN deprecated har-validator@5.1.5: this library is no longer supported

npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142

added 240 packages, and audited 241 packages in 25s

19 packages are looking for funding

run `npm fund` for detail

3 high severity vulnerabilities

To address all issues, run:

npm audit fix

Run `npm audit` for details.

sudo npm install autoprefixer --save-dev

sudo npm install concat --save-dev

sudo npm install postcss-cli --save-dev

sudo npm install npm-run-all -g

Install Visual Studio Code on Linux

sudo dpkg -i code_1.71.2-1663191218_amd64.deb

sudo apt install code

Visual Studio Code shows red tag error

1st of all Check previous tag for potential problems!

"Visual Studio Code is unable to watch for file changes in this large workspace" (error ENOSPC)

Ctrl + Alt + T

cat /proc/sys/fs/inotify/max_user_watches

8192

nano /etc/sysctl.conf

fs.inotify.max_user_watches=524288

reboot

cat /proc/sys/fs/inotify/max_user_watches

524288

How to fix favicon error in Visual Studio Code?

GET http://127.0.0.1:5500/favicon.ico 404 Not Found

Failed to load resource: the server responded with a status of 404 (Not Found) favicon.ico

More button and cards with JavaScript

<!DOCTYPE html>

<html>

<head>

<style>

#more {display: none;} // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

</style>

</head>

<body>

<h2>Read More Read Less Button</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor.</span></p>

<button onclick="myFunction()" id="myBtn">Read more</button>

function myFunction() {

var dots = document.getElementById("dots");

var moreText = document.getElementById("more");

var btnText = document.getElementById("myBtn");

if (dots.style.display === "none") {

dots.style.display = "inline";

btnText.innerHTML = "Read more";

moreText.style.display = "none";

} else {

dots.style.display = "none";

btnText.innerHTML = "Read less";

moreText.style.display = "inline";

}

</script>

</body>

</html>

Quick CSS styling for web pages

Ctrl + Shift + I

Ctrl + Shift + M

https://www.w3schools.com/css/default.asp

https://css-tricks.com/snippets/

https://validator.w3.org/

https://type-scale.com/

Colour picker

Google Fonts

Visual Studio Code HTML Emmet Abbreviations

! // HTML page template

ul#nav // ul id="nav"

(li>a)*4

.class*3 // 3 div with class="class"

h1{FlexBox}+(section#Id>h2{Properties of the .. flex Container}+.flexbox-container>(.flexbox-item)*6)*2

Ctrl+Alt+ ↑ / ↓, Esc

Ctrl + D, D, D, D...

Ctrl + Shift + E

Ctrl + P

Ctrl + ,

Commands, features and Node.js usage

https://nodejs.org/en/docs/

https://docs.npmjs.com/

npm i nodemon -g

https://expressjs.com/en/starter/installing.html

npm list

npm list -g

npm i package@1.0.0 // install npm package v 1.0.0

npm uninstall package

npm outdated

node -v

press Tab key // to see global variables

> 2+3

> _-5 // _ => previous result

> String. and press Tab key to see list of methods

Reading text file:

const fs = require('fs'); // file system module https://nodejs.org/dist/latest-v18.x/docs/api/fs.html

const textIn = fs.readFileSync('./txt/input.txt', 'utf-8'); // DO NOT USE sync in callback functions

Write into text file:

const textOut = `This is test: ${textIn}.\nCreated on ${Date.now()}`;

fs.writeFileSync('./txt/output.txt', textOut);

console.log('File written');

Asynchronous way:

fs.readFile('./txt/start.txt', 'utf-8', (err, data1) => {

if (err) return console.log('ERROR!');

fs.readFile(`./txt/${data1}.txt`, 'utf-8', (err, data2) => {

console.log(data2);

fs.readFile('./txt/append.txt', 'utf-8', (err, data3) => {

console.log(data3);

fs.writeFile('./txt/final.txt', `${data2}\n${data3}`, 'utf-8', (err) => {

console.log('Your file has been written!');

});

console.log('Will read file!');

Async/Await to escape "Callback Hell".

() => arrow function DO NO GET own this, but from parent function

GET POST PUT PATCH DELETE OPTIONS

GET => HTTP request: start line, headers, body

Tuesday, August 16, 2022

dri3 extension not supported on Kubuntu

[80663:0816/211245.612952:ERROR:gpu_memory_buffer_support_x11.cc(44)] dri3 extension not supported. Solved on Kubuntu 22.10 by installing latest nvidia-driver-xxx.

xdpyinfo | grep DRI

DRI2

Install Electron on Kubuntu Linux

npm i -D electron // install as devDependency in project

npm start

npm i -D nodemon // install as devDependency in project

npm run dev // dev in package.json

git clone https://github.com/electron/electron-quick-start

cd electron-quick-start

npm install && npm start

bash: npm: command not found

sudo apt install npm

npm install

npm start

Install Node.js on Kubuntu Linux

sudo apt install nodejs

https://github.com/nodesource/distributions/blob/master/README.md

Qt keymaps keyboard keys references

insert(DIKS_BACKSPACE , Qt::Key_Backspace);

insert(DIKS_TAB , Qt::Key_Tab);

insert(DIKS_RETURN , Qt::Key_Return);

insert(DIKS_ESCAPE , Qt::Key_Escape);

insert(DIKS_DELETE , Qt::Key_Delete);

Amarok errors on Kubuntu

The name org.kde.amarok was not provided by any .service files:

DBusActivatable=true to DBusActivatable=false in desktop file /usr/share/applications/org.kde.amarok.desktop

Kusader very slow extracting 7z 7zip 7-zip, zip

Krusader is very slow in browsing 7z and extracting separate folders. Use zip instead or:

Meta => Extract => Extract archive here => copy files to destination

Prefer 7z because compression is better and less errors while packing.

zip -9 -r /save/to/folder/archive.zip /zip/the/folder

// /zip/the/folder - path to your source folder

// /save/to/folder/ - path to destination folder

// r - recurse into directories

// 9 - compression level

Sunday, August 14, 2022

Change font size and Wine theme

winecfg

Graphics => Screen Resolution => 160 dpi

wine regedit

HKEY_CURRENT_CONFIG => Software => Fonts

LogPixels => 160

Change window background to gray in wine

Desktop Integration => Item => Choose items

HKEY_CURRENT_USER => Control Panel => Colors

Window 120 120 120

Remove Gnome packages on Kubuntu 22.10

sudo apt remove *gnome*

After this operation, 4 110 kB disk space will be freed.

Do you want to continue? [Y/n] n

NO POINT TO MAKE FUSS ABOUT IT.

apt list | grep gnome

Kubuntu Konsole terminal shortcuts

Ctrl + Alt + T // terminal

Ctrl + Alt + , // Configure Keyboard Shortcuts

Ctrl + Shift + , // Configure

Ctrl + Shift + M

Ctrl + K / Ctrl + U

Ctrl + L // clear

Ctrl + Right Arrow / Ctrl + Left Arrow

nmcli connected (site only) limited connectivity

nmcli

nmcli dev status

nmcli dev show

sudo lshw -short -class network

nmcli general status

STATE CONNECTIVITY WIFI-HW WIFI WWAN-HW WWAN

connected (site only) limited missing enabled missing enabled

Connectivity gets limited for no reason but becomes full after:

nmcli networking connectivity check

full

Free disk space on Linux system

sudo journalctl --rotate

sudo journalctl --vacuum-time=2d

journalctl --vacuum-size=100M

https://www.freedesktop.org/software/systemd/man/journald.conf.html

sudo nano /etc/systemd/journald.conf

SystemMaxUse=128M // remove # => uncomment

MaxFileSec=2day // remove # => uncomment

sudo systemctl restart systemd-journald

sudo rm /var/log/syslog.1 // 9.2 GB

/run/log/journal

/var/log/journal

/home/user/.cache/

find ~/.cache/ -depth -type f -atime +365

find ~/.cache/ -type f -atime +365 -delete

/home/user/.wine/drive_c/users/user/Temp/ // firefox, google-chrome, thumbnails, wine, winetricks

sudo apt autoclean

sudo apt autoremove

Failed to load module "xapp-gtk3-module"

journalctl | less

nvidia-settings[33395]: Failed to load module "xapp-gtk3-module"

sudo apt install xapp

Changing windows with KDE Plasma navigation

Holt Alt, press Tab, select window with arrows.

Ctrl + F9 / Ctrl + F10 and select window with arrows.

System and hardware monitoring utilities

sudo dmesg | less

sudo dmesg | grep usb

vmstat

free // show RAM and swap usage

journalctl

lsblk

less /proc/cpuinfo

less /proc/meminfo // detailed information on memory usage

lshw // list hardware

lsusb

mount

Check and log running process in Ubuntu Linux

ps aux | less // q to exit

ps aux | grep process

ps -U user

pstree

pgrep processname // show process pid

pgrep -l processname // show process pid & name

There is separate directory for every process with name as pid number in /proc

ipcs // list of the IPC resources currently in use

kill pid

killall processname

lsof -p pid | less // show list of all the files open for the process

pkill processname

top

udevadm monitor

Windows Ctrl+Alt+Del equivalent in Linux

Saturday, August 13, 2022

find command in Linux

sudo find /folder -xdev -name file*

// -xdev means exclude other mounted file systems

// find -xdev doesn’t descend into directories that are mount points, but it still lists them

find / -xdev -size +100M // find files more than 100MB

find /home -name name.txt

sudo find / -xdev -name "file-name*" -print -exec rm -rf {} + / find and remove

find /path/to/directory -type f -name "*word*" //find files with a specific word in their name

//-type f: Limits the search to files (ignoring directories)

KDE KWin window manager problems

/home/user/.config/kdedefaults/kwinrc

/home/user/.config/kwinrc

sudo apt install kwin-x11

sudo apt install kwin-wayland

Ctrl + Alt + T => kwin --replace // restart desktop

Alt + F2 => kwin --replace // restart desktop

killall plasmashell && kstart plasmashell // restart Plasma Desktop

sudo systemctl restart display-manager

sudo systemctl restart gdm3

Check Compositor Settings for KDE Plasma Desktop Effects

qdbus org.kde.KWin /KWin supportInformation | grep -i composit

System Settings => Display and Monitor => Compositor

Shift+Alt+F12 // toggle compositing on/off at any time

qdbus org.kde.KWin /Compositor suspend

qdbus org.kde.KWin /Compositor resume

Clear Telegram Desktop cache on Linux

Meta => Telegram Desktop => Settings => Advanced => Manage local storage => Clear all

Directories to backup user and apps settings

/home

dpkg --get-selections > ~/my-packages.txt

to build up a list of everything installed (or removed) on your system. It will be saved in your home folder as my-packages.txt. Once you reinstall, run

sudo dpkg --set-selections < ~/my-packages.txt

(assuming the file is placed in the same location again) and then

sudo apt-get -u dselect-upgrade

to start installing packages. You'll want to also back up

/etc/apt/

and restore it on the new installation to ensure that any extra software you may have installed is still able to be installed again.

History of installed, upgraded or removed packages in Ubuntu

grep "install " /var/log/dpkg.log

grep "upgrade " /var/log/dpkg.log

grep "remove " /var/log/dpkg.log

zgrep command is used to search out expressions from a given a file even if it is compressed.

zgrep "upgrade " /var/log/dpkg.log.2.gz

sudo journalctl --vacuum-time=2d

https://www.linuxuprising.com/2019/01/how-to-show-history-of-installed.html

Linux command line for beginners

If you can’t find a launcher, or if you just want a faster way to bring up the terminal, most Linux systems use the same default keyboard shortcut to start it: Ctrl-Alt-T.

KDE Plasma Present Windows desktop effect not working

Reload KDE's compositor. Replace already-running ICCCM2.0-compliant window manager.

Alt + F2 => kwin --replace

Disable "Allow applications to block compositing" in Meta => Compositor.

plasmashell is responsible for the background and other shell things.

killall plasmashell

kstart plasmashell

sudo apt reinstall kwin-x11

sudo apt reinstall qdbus

Best applications for Linux KDE

Full list of native KDE software https://apps.kde.org/

sudo add-apt-repository ppa:kubuntu-ppa/ppa

sudo apt update

sudo apt dist-upgrade

sudo apt install plasma-desktop

Reading package lists... Done

Building dependency tree... Done

Reading state information... Done

0 upgraded, 0 newly installed, 1 reinstalled, 0 to remove and 24 not upgraded.

Need to get 1 244 kB of archives.

After this operation, 0 B of additional disk space will be used.

Get:1 http://archive.ubuntu.com/ubuntu kinetic/universe amd64 plasma-desktop amd64 4:5.25.4-1ubuntu2 [1 244 kB]

Fetched 1 244 kB in 2s (665 kB/s)

(Reading database ... 213244 files and directories currently installed.)

Preparing to unpack .../plasma-desktop_4%3a5.25.4-1ubuntu2_amd64.deb ...

Unpacking plasma-desktop (4:5.25.4-1ubuntu2) over (4:5.25.4-1ubuntu2) ...

Setting up plasma-desktop (4:5.25.4-1ubuntu2) ...

Processing triggers for mailcap (3.70+nmu1ubuntu1) ...

Processing triggers for desktop-file-utils (0.26-1ubuntu3) ...

Processing triggers for dbus (1.12.20-2ubuntu4) ...

sudo apt install kde-plasma-desktop // no need to install

Reading package lists... Done

Building dependency tree... Done

Reading state information... Done

0 upgraded, 0 newly installed, 1 reinstalled, 0 to remove and 24 not upgraded.

Need to get 1 798 B of archives.

After this operation, 0 B of additional disk space will be used.

Get:1 http://archive.ubuntu.com/ubuntu kinetic/universe amd64 kde-plasma-desktop amd64 5:127ubuntu3 [1 798 B]

Fetched 1 798 B in 1s (2 915 B/s)

(Reading database ... 213244 files and directories currently installed.)

Preparing to unpack .../kde-plasma-desktop_5%3a127ubuntu3_amd64.deb ...

Unpacking kde-plasma-desktop (5:127ubuntu3) over (5:127ubuntu3) ...

Setting up kde-plasma-desktop (5:127ubuntu3) ...

Best mp3 player for Linux: Pragha, Amarok (bloatware but works)

Best video TV players for Linux: VLC, Kaffeine (integrates with Dolphin, supports DVB)

Best file manager for Linux: Krusader

Best word processors for Linux: LibreOffice, OpenOffice, Tesseract, Recoll

Best torrent client for Linux: qBittorent

Best dictionary for Linux: GoldenDict

Best web browsers for Linux: Firefox, Chrome

Best PDF, PS, Tiff, CHM, DjVu, Images, DVI, XPS, ODT, Fiction Book, Comic Book, Plucker, EPub, Fax document viewer for Linux: Okular, KchmViewer, gscan2pdf

Best integrated development environment (IDE) for linux: Visual Studio Code, KDevelop (C, C++, Javascript/QML, PHP, Python)

Astronomy: Stellarium - desktop planetarium

Video recording: OBS Studio

FreeCAD, GIMP, Krita, Blender, InkScape

Friday, August 12, 2022

Cisco and Zyxel Command-line interface (CLI)

telnet 192.168.1.1

show associations

show interface

show ip arp

Viewing the IP ARP table allows you to determine which device replied to the ARP request sent out for a particular IP address and whether that is a desirable behavior. Furthermore, you can check accuracy of any static ARP entries currently in the table. Remember that an interface that has IP proxy-ARP enabled on it responds to ARP requests that do not necessarily contain the replying interface's IP address. Hence, it is possible that an ARP table may contain multiple entries (with different IP addresses), all of which have the same MAC address in front of them.

show ip route

show log

show printers

show running-config

show system

show usb

show version

tools traceroute

torrent

whoami

Scan network routing and list LAN interfaces ports

sudo apt install nmap

sudo apt install net-tools

ifconfig

ip link

nmcli

netstat

route

ss // show network status

ping 8.8.8.8

PING 8.8.8.8 (8.8.8.8) 56(84) bytes of data.
64 bytes from 8.8.8.8: icmp_seq=1 ttl=119 time=143 ms

nmcli dev status

DEVICE TYPE STATE CONNECTION
enp0 ethernet connected Wired connection 1
lo loopback unmanaged --

nmap -p- localhost // scan port and show ports on localhost

Starting Nmap 7.92 ( https://nmap.org ) at 2022-09-25 12:32 EEST
Nmap scan report for localhost (127.0.0.1)
Host is up (0.000066s latency).
Not shown: 65529 closed tcp ports (conn-refused)
PORT      STATE SERVICE
139/tcp   open netbios-ssn
445/tcp   open microsoft-ds
631/tcp   open ipp
1716/tcp open xmsg
27017/tcp open mongod
29898/tcp open unknown

Nmap done: 1 IP address (1 host up) scanned in 1.81 seconds

nmap -sP 192.168.1.0/24 // ping scan (ICMP Ping Only)

Starting Nmap 7.92 ( https://nmap.org ) at 2022-09-25 12:37 EEST
Nmap done: 256 IP addresses (0 hosts up) scanned in 104.19 seconds

sudo nmap -sn 192.168.1.0/24 // ping sweep from 192.168.1.1 to 192.168.1.254

nslookup <IP_address>

traceroute

hostname -i

hostname -I

nmap - Network exploration tool and security / port scanner

nmcli - command-line tool for controlling NetworkManager

dhclient - Dynamic Host Configuration Protocol Client

APT package manager - command-line interface

sudo apt update && sudo apt upgrade

apt list --upgradable

apt list ?obsolete // show obsolete packages

sudo apt full-upgrade

sudo apt edit-sources // edit repositories

sudo nano /etc/apt/sources.list // edit repositories

ls /etc/apt/sources.list.d // list additional repositories files

GNU nano 7.2 /etc/apt/sources.list
# deb cdrom:[Kubuntu 22.10 _Kinetic Kudu_ - Alpha amd64 (20220920)]/ kinetic main multiverse restricted universe

# See http://help.ubuntu.com/community/UpgradeNotes for how to upgrade to newer versions of the distribution.
deb http://archive.ubuntu.com/ubuntu kinetic main restricted universe multiverse

## Major bug fix updates produced after the final release of the distribution.
deb http://archive.ubuntu.com/ubuntu kinetic-updates main restricted universe multiverse

## N.B. software from this repository may not have been tested as
## extensively as that contained in the main release, although it includes
## newer versions of some applications which may provide useful features.
## Also, please note that software in backports WILL NOT receive any review
## or updates from the Ubuntu security team.
deb http://archive.ubuntu.com/ubuntu kinetic-backports main restricted universe multiverse
deb http://security.ubuntu.com/ubuntu kinetic-security main restricted universe multiverse

# This system was installed using small removable media
# (e.g. netinst, live or single CD). The matching "deb cdrom"
# entries were disabled at the end of the installation process.
# For information about how to configure apt package sources,
# see the sources.list(5) manual.

sudo apt install package // reinstall remove purge autoremove

sudo apt --purge autoremove

apt search package // ^ * ?

apt show package // information about package

apt list *package*

apt list | grep package

apt list --installed | grep package

apt depends package // rdepends

sudo apt-mark hold package // holding means it can not be upgraded till you run unhold

sudo apt-mark unhold package

man apt OR apt --help

sudo apt-key list // find the key id in /etc/apt/trusted.gpg

sudo apt-key del B455BEF0

Advanced Package Tool

aptitude - high-level interface to the package manager

Ctrl + Alt + T

sudo aptitude

https://manpages.ubuntu.com/manpages/bionic/man8/aptitude-curses.8.html

Thursday, August 11, 2022

Disable notification sounds in Plasma Desktop

Meta => PulseAudio Volume Control OR pavucontrol-qt // System Sounds

No access to shared folders on Ubuntu from Windows

sudo apt install samba

sudo apt install smbclient

samba -V

Version 4.16.4-Ubuntu

sudo nano /etc/samba/smb.conf

workgroup = WORKGROUP

client max protocol = SMB3

client min protocol = NT1

server max protocol = SMB3

server min protocol = NT1

security = user

force user = user

sudo service smbd restart

sudo service smbd status

sudo smbstatus // display connections to server

sudo apt-mark hold samba // unhold samba TO UPGRADE

sudo apt-mark hold smbclient // unhold smbclient TO UPGRADE

These parameters allow to browse Windows LAN and network machines in Dolphin. To access shared folders on Windows PCs login and password are needed: Any Any. Problem with Windows 7 PC.

Actually only server min protocol = NT1 can be used, but in such case there will be no WORKGROUP icon in Dolphin and NO access to Windows 10 computers with SMB 1.0 activated BUT access to Windows 7 PC will be granted - therefore both client NT1 are necessary (for Windows 10 PCs with SMB 1.0). All Windows PCs and Android devices have access to shared folders on Kubuntu 22.10.

No access to shared folders on Windows

testparm

Upgrade Linux distro to new release adding new repositries

sudo nano /etc/update-manager/release-upgrades

set Prompt=normal // or lts

sudo do-release-upgrade // safest option to upgrade system without losing files or installed apps

https://kubuntu.org/news/plasma-5-25-beta-available-for-testing/

sudo add-apt-repository ppa:kubuntu-ppa/beta && sudo apt full-upgrade -y

sudo nano /etc/apt/sources.list // main repositories list. Change distro name - noble.

# deb cdrom:[Kubuntu 22.10 _Kinetic Kudu_ - Alpha amd64 (20220920)]/ kinetic main multiverse restricted universe
# See http://help.ubuntu.com/community/UpgradeNotes for how to upgrade to newer versions of the distribution.
deb http://archive.ubuntu.com/ubuntu noble main restricted universe multiverse

## Major bug fix updates produced after the final release of the distribution.
deb http://archive.ubuntu.com/ubuntu noble-updates main restricted universe multiverse

## N.B. software from this repository may not have been tested as
## extensively as that contained in the main release, although it includes
## newer versions of some applications which may provide useful features.
## Also, please note that software in backports WILL NOT receive any review
## or updates from the Ubuntu security team.
deb http://archive.ubuntu.com/ubuntu noble-backports main restricted universe multiverse
deb http://security.ubuntu.com/ubuntu noble-security main restricted universe multiverse

# This system was installed using small removable media
# (e.g. netinst, live or single CD). The matching "deb cdrom"
# entries were disabled at the end of the installation process.
# For information about how to configure apt package sources,
# see the sources.list(5) manual.

sudo apt update

sudo apt upgrade // do not auto-handle dependencies

sudo apt autoremove

sudo apt dist-upgrade // installs new kernel

sudo apt full-upgrade // upgrades but may remove installed packages to resolve conflicts

sudo apt install update-manager-core // manages release upgrades

sudo apt-get install --reinstall linux-image-$(uname -r) // reinstall linux kernel

sudo apt-get install --reinstall linux-image-extra-VERSION* // reinstall all drivers

Forced install to fix broken packages half-installed

cd /var/cache/apt/archives/

sudo dpkg -i /var/cache/apt/archives/packagename_amd64.deb

sudo apt --fix-broken install

Wednesday, August 10, 2022

Avahi daemon configuration file location and settings

sudo apt install avahi-daemon avahi-utils

sudo find -xdev -name avahi

./etc/avahi

./usr/share/avahi

./usr/lib/i386-linux-gnu/avahi

./usr/lib/x86_64-linux-gnu/avahi

sudo touch /etc/avahi/services/smb.service

sudo nano /etc/avahi/services/smb.service

<?xml version="1.0" standalone='no'?>

<!DOCTYPE service-group SYSTEM "avahi-service.dtd">

<service-group>

</service>

<type>_device-info._tcp</type>

<txt-record>model=RackMac</txt-record>

</service>

</service-group>

sudo systemctl restart avahi-daemon.service

sudo service avahi-daemon status

WSDD configuration file location and settings

WSDD - Web Service Discovery host and client daemon.

sudo find -xdev -name wsdd

./etc/default/wsdd

./usr/sbin/wsdd

./usr/share/lintian/overrides/wsdd

./usr/share/doc/wsdd

sudo nano /etc/default/wsdd

# Defaults file for wsdd

# Useful args here are -i eth0 -6 etc

# Consult wsdd(8) man page

WSDD_PARAMS="--shortlog --discovery --interface enp33s0 --hostname server --workgroup HOME"

Error: Cannot Satisfy Dependencies In Ubuntu

sudo dpkg -i packagename.deb

Network adapter disabled after boot no connection LAN

ip link

sudo nmcli dev set YOURDEVICE managed yes

nmcli dev status

sudo touch /etc/NetworkManager/conf.d/10-globally-managed-devices.conf

sudo nano /etc/NetworkManager/conf.d/10-globally-managed-devices.conf

[keyfile]

unmanaged-devices=none

Save 10-globally-managed-devices.conf

sudo systemctl restart NetworkManager

Tuesday, August 9, 2022

No network connection in Kubuntu recovery mode

ip link

1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN mode DEFAULT group default qlen 1000

link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00

2: enp33s0: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc fq_codel state UP mode DEFAULT group default qlen 1000

link/ether 30:9c:23:01:38:2a brd ff:ff:ff:ff:ff:ff

3: docker0: <NO-CARRIER,BROADCAST,MULTICAST,UP> mtu 1500 qdisc noqueue state DOWN mode DEFAULT group default

link/ether 02:42:e3:3f:05:ac brd ff:ff:ff:ff:ff:ff

4: br-c5b10384c38e: <NO-CARRIER,BROADCAST,MULTICAST,UP> mtu 1500 qdisc noqueue state DOWN mode DEFAULT group default

link/ether 02:42:de:dd:e0:34 brd ff:ff:ff:ff:ff:ff

ls /sys/class/net

ip link

dhclient

ping 8.8.8.8

sudo apt install plasma-nm

sudo apt install network-manager

nmcli dev status

Mouse and keyboard do not work in Kubuntu Plasma

sudo apt install --reinstall xserver-xorg

---if above didn't help--

sudo apt install --reinstall linux-image-VERSION-generic

sudo apt install --reinstall linux-modules-VERSION-generic

---if some basic software is missing---

sudo apt install kubuntu-desktop

KDE configuration GUI for the Wacom drivers missing

sudo apt -y install kde-config-tablet

search Graphic Tablet in menu

Create a bootable USB stick on Linux terminal with dd

Find USB flash drive with following commands:

lsblk

sudo dmesg

sudo umount /dev/sdd1 - IN MY CASE!!!

sudo dd if=kubuntu-22.04-desktop-amd64.iso of=/dev/sdd1 bs=1M status=progress

Wait till finish. dd will make USB drive space equal to ISO image.

To recover all USB drive space, do following command:

sudo dd if=/dev/zero of=/dev/sdd1 status=progress

Wait till finish. ALL DATA WILL BE DELETED!!!

Format USB drive in preferred partition editor.

Monday, August 1, 2022

Any characters template for KRename and KrViewer

$ rename -n 's/(.{10}).*(\.jpg)$/$1$2/' *.jpg

The -n option only simulates the command, so that you can verify the changes. Run without it to actually make the changes.

The regex (.{10}).*(\.jpg) consists:

.{10} - any 10 characters, in a group (…), followed by

.* - any number of any characters followed by

\.jpg$ - the extension at the end ($) of the filename, in the second group

The replacement $1$2 is just the first group followed by the second.

Wednesday, August 31, 2022

Tuesday, August 30, 2022

Monday, August 29, 2022

Sunday, August 28, 2022

Saturday, August 27, 2022

Friday, August 26, 2022

Thursday, August 25, 2022

Wednesday, August 24, 2022

Tuesday, August 23, 2022

Monday, August 22, 2022

Saturday, August 20, 2022

Thursday, August 18, 2022

Wednesday, August 17, 2022

Tuesday, August 16, 2022

Monday, August 15, 2022

Sunday, August 14, 2022

Saturday, August 13, 2022

Friday, August 12, 2022

Thursday, August 11, 2022

Wednesday, August 10, 2022

Tuesday, August 9, 2022

Monday, August 1, 2022

Archives

Popular