Create tar from all folders

Follow commands create tar archives folder by folder into their own tar - so folder becomes folder.tar

Compressed archive

find . -type d -maxdepth 1 -mindepth 1 -exec tar zcvf {}.tar.gz {} \;

Un-coompressed archive

find . -type d -maxdepth 1 -mindepth 1 -exec tar cvf {}.tar {}  \;

MariaDB and Docker Compose

This is a short instructions how to run MariaDB Docker with docker compose and have suitable developer env.

Let's have follow docker-compose.yml and two folders ./etc/db and ./data

version: '3.3'

services:

  mariadb:
    image: mariadb:latest
    environment:
      TZ: Europe/Prague
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: exampledb
    restart: always
    volumes:
      - ./etc/db:/db # shared DB folder
      - ./data/mysql:/var/lib/mysql # database data
      - ./etc/mysql.ini:/etc/mysql/conf.d/my.ini # config file
      - ./etc/db/init.sh:/docker-entrypoint-initdb.d/init.sh # init
    ports:
      - 3306
# php-fpm:
# nginx:
# ...

Optionally you can define database with config file - here is mine ./etc/mysql.ini:

[mysqld]
character-set-server=utf8
collation-server=utf8_czech_ci

Initializing a fresh instance

Most important is env - with MYSQL_ROOT_PASSWORD and MYSQL_DATABASE variable. When a container is started for the first time it will execute files with extensions .sh, .sql and .sql.gz that are found in /docker-entrypoint-initdb.d. Lets have follow ./etc/db/init.sh script:

#!/bin/bash
if [ -f /db/$MYSQL_DATABASE.sql ]; then
  mysql --protocol=socket -uroot -p -p"$MYSQL_ROOT_PASSWORD" $MYSQL_DATABASE < /db/$MYSQL_DATABASE.sql
fi

This init.sh script execute content of sql file with same name as database. This solution helps you run your project without worrying about init data. You can commit this file to git and share with all coworkers.

Now it's time run docker-compose up

Connect to database prompt

docker-compose exec \
 mariadb bash -c 'mysql -u root -p$MYSQL_ROOT_PASSWORD $MYSQL_DATABASE'

Backup database to SQL file

docker-compose exec \
 mariadb bash -c 'mysqldump -u root --password=$MYSQL_ROOT_PASSWORD  $MYSQL_DATABASE > /db/$MYSQL_DATABASE.sql'

Restore database from SQL file

docker-compose exec \
mariadb bash -c 'mysql -u root -p$MYSQL_ROOT_PASSWORD $MYSQL_DATABASE < /db/$MYSQL_DATABASE.sql'

Execute mysql_upgrade after upgrade

docker-compose exec mariadb bash -c 'mysql_upgrade -uroot -proot'

Best china shops list

iMessage like Chat Bubbles with CSS and SVG

HTML code

<article>
  <p class="from-me last">Hi there! What's up?</p>
  <p class="to-me last">Hi, how is it going?!</p>
  <p class="from-me">It's pretty cool!</p>
  <p class="from-me last">Check out this bubble!</p>
</article>

CSS code

* {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.5;
}

article {
  padding:20px;
  justify-self: center;
  align-self: center;
  text-align: left;
  display: flex;
  flex-direction: column;
  width: 450px;
}

article p {
  font-size: 16px;
  line-height: 1.4;
  margin: 1px 0;
  padding: 8px 17px 6px 13px;
  max-width: 380px;
  position: relative;
  border-radius: 18px;
}

article p:after {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: -1;
}

article p.from-me {
  color: white;
  align-self: flex-end;
  background-color: #1084ff;
}

article p.from-me.last:after {

  background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='15.515px' height='17.5px' viewBox='32.485 17.5 15.515 17.5' enable-background='new 32.485 17.5 15.515 17.5'><path fill='#1084FF' d='M48,35c-7-4-6-8.75-6-17.5C28,17.5,29,35,48,35z'/></svg>") right bottom no-repeat;
  right: -6px;
}

article p.to-me {
  color: black;
  align-self: flex-start;
  background-color: #E5E5EA;
}

article p.to-me.last:after {
  background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='15.515px' height='17.5px' viewBox='32.484 17.5 15.515 17.5' enable-background='new 32.484 17.5 15.515 17.5'><path fill='#E5E5EA' d='M38.484,17.5c0,8.75,1,13.5-6,17.5C51.484,35,52.484,17.5,38.484,17.5z'/></svg>") left bottom no-repeat;
  left: -6px;
}

iOS like on/off switch with CSS and HTML

Out there is multiple solution of iOS like on/off switch button, but:

HTML code

<label class="switch">
  <input type="checkbox">
  <span>This is checkbox label</span>
</label>

SCSS code

$size: 20px;

div {
  max-width:320px;
  margin: 60px auto;
  background: #fff;
  padding:30px 30px 10px 30px;
  border:1px solid #ddd;
}

.switch {
  position: relative;
  display: block;
  padding-bottom: 20px;
  text-align:left;

  input {
    display: none;
  }

  span:after, span:before {
    position: absolute;
    cursor: pointer;
    content: '';
  }

  span:before {
    background-color: #f5f5f5;
    border: 1px solid rgba(0, 0, 0, .1);
    transition: .4s;
    border-radius: 10 * $size;
    width: 2 * $size;
    height: $size;
    right: 0;
  }

  input:checked + span:before {
    background-color: #89c31a;
  }

  input:disabled + span:before {
    background-color: #b9b9b9;
  }

  span:after {
    width: $size;
    height: $size;
    background-color: #fff;
    border-radius: 50%;
    transition: .2s;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, .5);
    top: 1px;
    right: $size;
  }

  input:checked + span:after {
    transform: translateX($size);
  }

  input:disabled + span:after {
    background: rgba(255, 255, 255, .6);
  }
}