Applications.ge

Third party cookie example

Create third party cookie (

setcookie.php

):

$result = setcookie('cooname', 'V37', [
    'expires' => time() + 3600,
    'path' => '/',
    'domain' => '.sibrdzne.ge',
    'httpOnly' => true,
    'secure' => true,
    'SameSite' => 'None'
]);

Receive cookie from another domain (

getcookie.php

):

header('Access-Control-Allow-Origin:'.$_SERVER['HTTP_ORIGIN'] ?? '*');
header('Access-Control-Allow-Credentials:true');
echo $_COOKIE['cooname'] ?? 'no-cookie';

Pass cookie and fetch content from another domain (from console):

fetch('https://sibrdzne.ge/getcookie.php', {
    credentials:'include'
}).then(e=>e.text()).then(e=>console.log(e));

by Valeri Tandilashvili

HTTP

migrate only one migration

./vendor/bin/sail php artisan migrate --path=/database/migrations/2023_11_19_200822_add_unit_id_to_multiple_tables.php

by Luka Tatarishvili

MySQL

1

by otar datuadze

Postman

sadsdsdsds

:has pseudo selector in CSS for Navbar

HTML

`

<div class="container">
          <div class="item">Home</div>
          <div class="item">Shop</div>
          <div class="item">About</div>
          <div class="item">Contact</div>

CSS

.container {
           display: flex;
           padding: 2rem 3rem;
           gap: 2rem;
           border-radius: 1 rem;

CSS

Select any .item that is not hovered, but is inside a .container which has an .item that is hovered

.item {
color: #ffffff;
transition: color 300ms;
}

.container: has(.item:hover)
   .item:not(:hover)  {
    color: #888888;
}

by Tinatin Kvinikadze

CSS

HTML

Pseudo selector

Array KEY outside of LOOP

$key

is useful outside of the

foreach

loop

$array = ['key1'=>1234, 'key2'=>2345, 'key3'=>3457];
foreach ($array as $key => $item) {
	
}
echo $key; // key3

by Valeri Tandilashvili

PHP

Calendar CODE


// Example usage:
$year = 2023;
$month = 1; // May

function generateMonthArray($year, $month) {
    $numDays = cal_days_in_month(CAL_GREGORIAN, $month, $year);
    $firstDay = date("N", strtotime("$year-$month-01")); // 1 = Monday, 7 = Sunday

    $weekdays = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];

    $monthArray = array_fill_keys($weekdays, []);

    for ($day = 1; $day <= $numDays; $day++) {
        $weekday = ($firstDay + $day - 2) % 7; // Adjust to start from Monday
        $monthArray[$weekdays[$weekday]][] = $day;
    }
    
    foreach ($monthArray as &$weekDays) {
    	if ($weekDays[0]!=1) {
    		array_unshift($weekDays, '');
    	} else {
    		break;
    	}
    }

    return $monthArray;
}

$result = generateMonthArray($year, $month);

// Print the result
foreach ($result as $weekday => $days) {
    echo $weekday . "\t" . implode("\t", $days) . "\n";
}

by Valeri Tandilashvili

PHP

git pull with and without rebase

If you prefer to rebase your local changes on top of the remote branch, you can use the rebase strategy. This essentially replays your local commits on top of the incoming remote changes. To use this strategy, you can run the following command before pulling:

git config pull.rebase true

If you want to pull without rebase then

git config pull.rebase false

by Luka Tatarishvili

Git

commands

CSS Animations

Example 1: Bouncing Ball Animation:

<!DOCTYPE html>
<html>
<head>
  <style>
    @keyframes bounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-100px); }
    }
    .ball {
    	border-radius: 30px;
      width: 50px;
      height: 50px;
      background-color: red;
      position: relative;
      animation: bounce 2s ease-in-out infinite;
    }
  </style>
</head>
<body>
  <div class="ball"></div>
</body>
</html>

The ball moves up and down in a continuous loop. The position: relative is used to keep the ball within its container. Example 2: Sequential Animation:

<!DOCTYPE html>
<html>
<head>
  <style>
    @keyframes slide-in {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(0); }
    }
    @keyframes fade-in {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }
    .card {
      width: 300px;
      height: 200px;
      background-color: #007bff;
      color: white;
      animation: slide-in 1s ease-in-out forwards, fade-in 1s ease-in-out forwards 1s;
    }
  </style>
</head>
<body>
  <div class="card">Sequential Animation</div>
</body>
</html>

This example combines two animations (slide-in and fade-in) to create a sequential animation effect on a card. The forwards keyword ensures that the final state of the animations is maintained after they finish. Example 3: Animated Typing Effect:

<!DOCTYPE html>
<html>
<head>
  <style>
    .typing {
      font-family: monospace;
      overflow: hidden;
      white-space: nowrap;
      border-right: 3px solid;
      animation: typing 3s steps(40) infinite, blink 0.75s step-end infinite;
    }
    @keyframes typing {
      from { width: 0; }
      to { width: 100%; }
    }
    @keyframes blink {
      50% { border-color: transparent; }
    }
  </style>
</head>
<body>
  <div class="typing">Hello, I'm a typing effect.</div>
</body>
</html>

The typing animation gradually reveals the text by increasing the width of the border, and the blink animation simulates the blinking cursor. Example 4: Animated Gradient Background:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
      height: 100vh;
      background: linear-gradient(-45deg, #007bff, #00ff00, #ff0000, #ffc107);
      background-size: 400% 400%;
      animation: gradient 10s ease infinite;
    }
    @keyframes gradient {
      0%, 100% { background-position: 0 50%; }
      25% { background-position: 100% 50%; }
      50% { background-position: 50% 100%; }
      75% { background-position: 0 50%; }
    }
  </style>
</head>
<body>
</body>
</html>

This example animates a gradient background by changing the background-position at different keyframes. The result is a visually striking and dynamic background. Example 5: Image Gallery with Hover Effect:

<!DOCTYPE html>
<html>
<head>
  <style>
    .image-container {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .image {
      width: 200px;
      height: 150px;
      overflow: hidden;
      position: relative;
      transition: transform 0.3s ease-in-out;
    }
    .image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .image:hover {
      transform: scale(1.1);
    }
    .caption {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      color: white;
      padding: 5px;
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
    }
    .image:hover .caption {
      opacity: 1;
    }
  </style>
</head>
<body>
  <div class="image-container">
    <div class="image">
      <img src="https://shorturl.at/fjsOQ" alt="Image 1">
      <div class="caption">Beautiful Landscape</div>
    </div>
    <div class="image">
      <img src="https://shorturl.at/muvW9" alt="Image 2">
      <div class="caption">City Skyline</div>
    </div>
    <div class="image">
      <img src="https://shorturl.at/bkwBE" alt="Image 3">
      <div class="caption">Sunny Beach</div>
    </div>
  </div>
</body>
</html>

This example creates an image gallery with a hover effect. When you hover over an image, it scales up and reveals a caption. The transition property is used to smoothly animate the scaling and opacity changes.

by Luka Tatarishvili

CSS

css

CSS Variables

Global Scope

: Variables defined at the

:root

level are considered to be in the

global

scope and can be

accessed

throughout your

entire stylesheet.

Example1: CSS:

:root {
  --primary-color: #007bff; /* Define the CSS variable */
}

.button {
  background-color: var(--primary-color); /* Use the CSS variable */
}

HTML:

<button class="button">Button 1</button>
  <button class="button">Button 2</button>
  <button class="button">Button 3</button>

Example2:

:root {
	--card-bg-color: #232323;
    --text-color: #7FFFD4;
    --text-font-family: 'Arial', sans-serif;
    --text-font-size: 17px;
    --text-line-height: 1.5;
}

.card {
  border: 1px solid #ddd;
  padding: 20px;
  margin: 10px;
  background-color: var(--card-bg-color);
}

.card p {
  color: var(--text-color);
  font-family: var(--text-font-family);
  font-size: var(--text-font-size);
  line-height: var(--text-line-height);
  
}

HTML:

<div class="card">
    <p>This is the first card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>

  <div class="card">
    <p>This is the second card. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
  </div>

  <div class="card">
    <p>This is the third card. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  </div>

Example 3: CSS:

:root {
  --color-white: #ffffff;
  --color-blue: #007bff;
  --color-red: #ff0000;
  --color-green: #00ff00;
  --color-yellow: #fcba03;
}

.card {
	background-color: #f8f8f8;
  border: 5px solid var(--color-yellow);
  padding: 20px;
  margin: 10px;
}

.card h2 {
  color: var(--color-blue);
}

.card p {
  color: var(--color-black);
}

.button {
  background-color: var(--color-red);
  color: var(--color-white);
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  margin: 5px;
}

HTML:

<div class="card">
    <h2>Card 1</h2>
    <p>This is some text within Card 1.</p>
    <button class="button">Button 1</button>
  </div>

  <div class="card">
    <h2>Card 2</h2>
    <p>This is some text within Card 2.</p>
    <button class="button">Button 2</button>
  </div>
  
  <div class="card">
    <h2>Card 3</h2>
    <p>This is some text within Card 3.</p>
    <button class="button">Button 3</button>
  </div>

by Luka Tatarishvili

CSS

CSS VARIABLES

pointer-events: none

The element does not react to pointer events. It's a way to disable inputs inside the div

style="pointer-events: none;"

by Luka Tatarishvili

CSS

css property