My online log

Technology: Raspberry Pi, Git and web development.

Mead: Recipes and reviews.

Beer and more..

Future releases

10 Mar 2023 / Oscar F

ubuntu black orange hex

https://ubuntu.com/about/release-cycle

23.04

23.10

24.04 LTS

python-zen

https://devguide.python.org/versions/#versions

2022-10-24 - 3.11

2023-10-02 - 3.12

django logo negative

https://www.djangoproject.com/download/#supported-versions

2022-08 - 4.1

2023-04 - 4.2 LTS

2023-12 - 5.0

2024-08 - 5.1

2025-04 - 5.2 LTS

2025-12 - 6.0

Wagtail logo

https://github.com/wagtail/wagtail/wiki/Release-schedule

2022-11 - 4.1 LTS

2023-02 - 4.2

2023-05 - 5.0

2023-08 - 5.1*

CSS for gradient text font and rotating list animation

19 Jan 2023 / Oscar F

Gradient text Font

p {
  background: linear-gradient(to right, #ff8a00 0%, #dd4c4f 30%);
  background-clip: text;
  color: transparent;
}

Rotating list animation

List item: First Second

.rotate-list span {
  animation: rotateList 4s linear infinite;
  color: #3f91ef;
  opacity: 0;
  position: absolute;
}
.rotate-list span:nth-child(2) {
  animation-delay: 2s;
}
@keyframes rotateList {
  0% { opacity: 0; }
  20% { opacity: 0; transform: translateY(50px); }
  30% { opacity: 1; transform: translateY(0px); }
  70% { opacity: 1; transform: translateY(0px); }
  80% { opacity: 0; transform: translateY(-50px); }
  100% { opacity: 0; }
}

Flying box animation

using @keyframes

.box {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation: boxMove 15s infinite;
}
@keyframes boxMove {
  0%   {top: 0px; left: 0px; background: red; width: 100px;}
  25% {top: 100px; background: yellow; width: 200px;}
  50% {top: 200px; left: 200px; background: yellow; width: 300px;}
  75% {left: 0px; background: yellow; width: 200px;}
  100%   {top: 0px; background: red; width: 100px;}
}

Tic Tac Toe in ReactJS

03 Jan 2023 / Oscar F

Create the game

Install NodeJS and npm

sudo apt install nodejs npm

Create React app

npx create-react-app tic-tac-toe
cd tic-tac-toe
npm start

Update index.js

const root = ReactDOM.createRoot(document.getElementById("tic-tac-toe"));
root.render(<Game />);

Build for production

npm run build

Add the game to your site

<link rel="stylesheet" type="text/css" href="/documents/7/tic-tac-toe.css">
<div id="tic-tac-toe"></div>
<script src="/documents/8/tic-tac-toe.js" async=""></script>

Play the game

CSS for masonry, clip-path and Pantone color 2023

27 Dec 2022 / Oscar F

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout

To test masonry grid whit Firefox sett the flag
layout.css.grid-template-masonry-value.enabled
to true in about:config

Pantone Color 2023
Viva Magenta
hex: #bb2649

To get a skew of a div you can use css clip-path
https://www.w3schools.com/cssref/css3_pr_clip-path.php

clip-path: polygon(0 0,100% 15%,100% 100%,0 85%)

Basic Linux user and PostgreSQL setup commands

27 Aug 2022 / Oscar F

Linux commands

User

Add new user

sudo adduser devuser

Sudo privileges

Add sudo privileges

adduser devuser sudo

Remove sudo privileges from user

sudo deluser devuser sudo

Change password on user[1]

sudo passwd devuser

Delete user [2]

userdel -r devuser

if error

sudo killall -u devuser

or

userdel -f devuser

PostgreSQL commands

Setup

Create database

sudo su - postgres
createdb devdb

Create database user

sudo su - postgres
createuser -P devuser

or [3]

sudo su - postgres
psql
CREATE USER devuser WITH PASSWORD 'devpassword';
\q

Grant privileges to database user

sudo su - postgres
psql
GRANT ALL PRIVILEGES ON DATABASE devdb TO devuser;
\q

Backup

sudo su - postgres
pg_dump --no-owner -x devdb > backup.psql
exit

Restore backup

sudo su - devuser
psql devdb < backup.psql