Javascript document.write replacement

Replacement of document.write can be combination of insertAdjacentHTML() method and document.currentScript property.

The insertAdjacentHTML() method of the Element interface parses the specified text as HTML or XML and inserts the resulting nodes into the DOM tree at a specified position:

  • 'beforebegin': Before the element itself.
  • 'afterbegin': Just inside the element, before its first child.
  • 'beforeend': Just inside the element, after its last child.
  • 'afterend': After the element itself.

The Document.currentScript property returns the <script> element whose script is currently being processed. Best position to add new HTML will be beforebegin - new HTML will be inserted before <script> itself.

<script>
  document.currentScript.insertAdjacentHTML(
    'beforebegin', 
    'this is the document.write alternative'
  );
</script>

#javascript#2018

Život podle Charlese Bukowského

Legendární spisovatel a zastánce nevázaného života, Charles Bukowski, má pro vás 10 rad, jak žít naplno.

Nespokojte se jen tak s něčím

Pokud nevěříte, že si zasloužíte absolutně to nejlepší, nikdy to nedostanete.

„Chtěl jsem celý svět, nebo nic.“

Milujte sami sebe

Není to o tom mít narcistickou osobnost, je to o tom být spokojený sám se sebou.

„Nikdy jsem nepotkal jiného člověka, kterým bych chtěl být.“

Žijte život naplno

Pokud existuje něco šíleného, co byste jako umírající měli udělat, ať už je to cestování přes půl světa bez mapy nebo skákání z letadla s padákem - udělejte to a nečekejte.

„Hrozná není smrt, ale život lidí, kteří do smrti nežijí.“

Nebojte se bolesti, bez ní nemůžete zažít štěstí

Pocit smutku, úzkost nebo bolest je absolutně to nejhorší. Ale díky těmto špatným zkušenostem budeš cenit ty lepší mnohem víc.

„Musíš zemřít několikrát, než začneš opravdu žít.“

Buďte svým vlastním já a nebojte se to všem ukázat

Buďte sami sebou a zatraceně nikdy nemyslete na to, co by si ostatní lidé mohli myslet. Pro pana Bukowskiho to fungovalo dobře.

„Je lepší dělat nudné věci ve velkém stylu, než nebezpečné věci bez.“

Jsi silnější, než si myslíš

Když jde do tuhého, zvládnete skoro cokoliv. Nikdy se neřiďte pocitem, že něco nemůžete udělat, nebo že na to nejste dost dobří.

„Někdy si tak ráno vylezete z postele s pocitem, že to nebudete dělat, pak se ale v duchu zasmějete, kolikrát už jste se takto cítili.“

Nebojte se smrti

Buďte opatrní, zdraví, a vše dělejte s rozumem. Ale není třeba se bát smrti. Stává se to každému.

„Nosím smrt v mé levé kapse. Někdy ji vytáhnu a mluvím s ní: „Ahoj, zlato, jak se máš? Kdy přijdeš za mnou? Budu připravený.“

Důvěřujte sami sobě

Sebejistota je v podstatě klíčem ke všemu, ať už je to zabodování na rande snů nebo vyniknutí na firemním žebříčku.

„Problém se světem je, že inteligentní lidé jsou plni pochybností.“

Jsou mnohem horší věci než samota

Naučte se si užít a ocenit čas, kdy jste sami. Být s přáteli a láskami může být vynikající, ale dobré koníčky, zvědavost a sklon k tomu být sám mohou být stejně příjemné.

„Jsou horší věci, než být sám, ale často trvá desítky let, než si to člověk uvědomí - nejčastěji, když už je pozdě. A není nic horšího, než když je pozdě.“

Život běží, neber ho vždy tak vážně

Život není o dokonalosti, je to o radosti. Takže nikdy, nikdy, nikdy se nezapomeň bavit!

„Někdy je prostě potřeba čůrat do umyvadla.“

#lifehack#2018

Bluetooth sensor mesh

Idea: Create bluetooth mesh from bunch of env. sensors (doors, windows, temperature, humidity, move sensors, buttons) connected to hub.

Bluetooth mesh

Bluetooth buttons

Sensors

BEE280/BME680: Integrated environmental sensors

nRF52 / nRF51 / Bluetooth

Bluetooth 5

#iot#bluetooth#2018

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 {}  \;

#bash#tar#2018

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'

#2018

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#HTML#CSS#2017

iOS like on/off switch with CSS and HTML

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

  • none of them have that simple HTML as mine
  • none of them is pixel perfect (ok some are :-) but)
  • there is usually missing disabled status
  • they look slightly different then switch on iOS
  • they do not have labels on left side

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);
  }
}

#iOS#CSS#HTML#2017