Future releases
https://ubuntu.com/about/release-cycle
23.04
23.10
24.04 LTS
https://devguide.python.org/versions/#versions
2022-10-24 - 3.11
2023-10-02 - 3.12
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
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
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
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
Follow the tutorial at:
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
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
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