ChromeOS chroot

bash Linux
View 
mount -o remount,dev,exec,suid /dev/sda1
chroot /media/removable/USB\ Drive\ 1
mknod /dev/null c 1 3
chmod 666 /dev/null

Multi thread in c

c C / C++
View 
// gcc -pthread th.c
#include <stdio.h>
#include <stdlib.h>
#include <pthread.h>

void *entry_point(void *value) {
    int *num = (int *) value;
    int nth = *num;
    printf("thread%d (id : %ld) are run!\n", nth, pthread_self());

    if (*num > 3) {
        *num += 400;
        pthread_exit(value);
    }

    if (*num == 3) *num += 200;

    long i = 0;
    long d = 100000000;
    long max = (*num==1)? 100000000000 : 1000000000;
    while(i < max) {
        if (i%d == 0) printf("msg from thread%d (i = %ld)\n", nth, i);
        i++;
    }

    if (*num == 203) *num += 10;
    else if (*num <= 2) *num += 200;
}

int main(int argc, char **argv) {
    pthread_t thread1;
    pthread_t thread2;

    printf("main thread (id : %ld) are run!\n", pthread_self());

    // 4 for test thread exit
    // 1 for test normal thread
    int num1 = 1; 
    // 3 for test thread change args value without exit
    // 2 for cancel first thread
    int num2 = 2;

    pthread_create(&thread1, NULL, entry_point, &num1);
    pthread_create(&thread2, NULL, entry_point, &num2);

    //// for join one thread (wait end of this thread for continue)
    //pthread_join(thread1, NULL);
    while (1) {
        if (num2 > 200 && num2 < 400) pthread_cancel(thread1);
        if (num2 == 202 || num2 == 213) break;
    }
    printf("arg thread1 : %d, arg thread2 : %d\n", num1, num2);

    printf("close main thread\n");
    return EXIT_SUCCESS;
}
main thread (id : 140324940408640) are run!
thread1 (id : 140324940404480) are run!
msg from thread1 (i = 0)
thread2 (id : 140324932011776) are run!
msg from thread2 (i = 0)
msg from thread2 (i = 100000000)
msg from thread1 (i = 100000000)
msg from thread2 (i = 200000000)
msg from thread1 (i = 200000000)
msg from thread2 (i = 300000000)
msg from thread1 (i = 300000000)
msg from thread2 (i = 400000000)
msg from thread1 (i = 400000000)
msg from thread2 (i = 500000000)
msg from thread1 (i = 500000000)
msg from thread2 (i = 600000000)
msg from thread1 (i = 600000000)
msg from thread2 (i = 700000000)
msg from thread1 (i = 700000000)
msg from thread2 (i = 800000000)
msg from thread1 (i = 800000000)
msg from thread2 (i = 900000000)
msg from thread1 (i = 900000000)
arg thread1 : 1, arg thread2 : 202
close main thread

Get screen pid

bash Linux
View 
#!/bin/bash
# script.sh test
psid=`screen -list | grep $1 | awk -F'.' '{print $1}' | awk '{print $1}'`

if [ $? != 0 ]; then
    echo "error ps $1 no run"
    exit 1
fi
error ps test no run

Read and write in processes pipe

bash Linux
View 
#!/bin/bash

if [[ -p /proc/self/fd/0 ]]
then
    ls -la /proc/self/fd/0
    cat /proc/self/fd/0
    echo toto >> /proc/self/fd/0
    cat /proc/self/fd/0
fi

Shadow rounded rectangle

html JavaScript
View 
<canvas id="canvas" width="2000" height="2000"></canvas>
<script>
  window.onload = function () {
    function urlToFile(url, filename, mimeType) {
      mimeType = mimeType || (url.match(/^data:([^;]+);/) || '')[1];
      return (fetch(url)
        .then(function (res) {
          return res.arrayBuffer();
        })
        .then(function (buf) {
          return new File([buf], filename, {
            type: mimeType
          });
        })
      );
    }

    CanvasRenderingContext2D.prototype.roundRect = function (x, y, width, height, radius) {
      if (width < 2 * radius) radius = width / 2;
      if (height < 2 * radius) radius = height / 2;
      this.beginPath();
      this.moveTo(x + radius, y);
      this.arcTo(x + width, y, x + width, y + height, radius);
      this.arcTo(x + width, y + height, x, y + height, radius);
      this.arcTo(x, y + height, x, y, radius);
      this.arcTo(x, y, x + width, y, radius);
      this.closePath();
      return this;
    }

    let canvas = document.getElementById("canvas");
    let ctx = canvas.getContext("2d");

    let margine = 10;
    let rect = {
      x: margine,
      y: margine,
      width: canvas.width - (margine * 2),
      height: canvas.height - (margine * 2)
    }

    ctx.shadowBlur = 4;
    ctx.shadowColor = "black";

    // Fill in canvas
    ctx.roundRect(rect.x, rect.y, rect.width, rect.height, 20);
    ctx.fillStyle = 'rgba(255, 255, 255, 1)';
    ctx.fill();

    // Convert to file
    urlToFile(canvas.toDataURL("image/svg"), 'img.svg')
      .then(function (file) {
        console.log(file);
        var elem = window.document.createElement('a');
        elem.href = window.URL.createObjectURL(file);
        elem.download = file.name;
        document.body.appendChild(elem);
        elem.click();
        document.body.removeChild(elem);
      })
  }
</script>

Download canvas

js JavaScript
View 
window.onload = function () {
  let canvas = document.getElementById("canvas");
  let ctx = canvas.getContext("2d");

  let margin = 20;
  let rect = {
    x: margin,
    y: margin,
    width: canvas.width - (margin * 2),
    height: canvas.height - (margin * 2)
  }

  // Fill in canvas
  ctx.beginPath();
  ctx.rect(rect.x, rect.y, rect.width, rect.height, 20);
  ctx.stroke();

  let elem = window.document.createElement('a');
  elem.href = canvas.toDataURL("image/png");
  elem.download = 'img.png';
  elem.innerText = "download"
  document.body.appendChild(elem);
  // auto click
  //elem.click();
  //document.body.removeChild(elem);
}

voidchar

txt
View 
⁡⁡
⁡⁡
⁡⁡
⁡⁡

u2061
⁡⁡ ⁡⁡ ⁡⁡ ⁡⁡ u2061

Dot Graph

c Tool
View 
// dot -T pdf dotGraph.gv -o gotGraph.pdf
graph tree {
    a -- b -- c;
    b -- d;
}

Pdf white square

pdf
View 
whiteSquare.pdf

mc protocol

python Python
View 
b'\xfe\xfd\t\x00\x00\x00\x00\x00\x00\x00\x00\x0b' # bytearray
# 0xFEFD   9    00000000         00000000   11
# prefix | chalengeType | 0   | challenge | len

def write_varint(self, value):
    remaining = value
    ret = bytearray()
    for i in range(5):
        if remaining & ~0x7F == 0:
            ret.extend(struct.pack("!B", remaining))
            return ret
        ret.extend(struct.pack("!B", remaining & 0x7F | 0x80))
        remaining >>= 7
    raise ValueError("The value %d is too big to send in a varint" % value)

Minecraft status json

python Python
View 
from mcstatus import MinecraftServer
import sys
import json

server = MinecraftServer.lookup(str(sys.argv[1]))

try:
  print(json.dumps(server.status().raw))

  print("Query :")
  print(json.dumps(server.query().raw))
except:
  print("{}")

Minecraft status

python Python
View 
from mcstatus import MinecraftServer
import sys
import json

server = MinecraftServer.lookup(str(sys.argv[1]))

print("Status :")

status = server.status()
print(status.players.online)
print(status.players.max)
psname = []
psid = []

if status.players.sample is not None:
  for i in status.players.sample:
    psname.append(i.name)
    psid.append(i.id)

print(", ".join(psname))
print(", ".join(psid))

print(status.version.name)
print(status.version.protocol)

print(status.description["text"])
print(status.favicon)
print(status.latency)
print(json.dumps(status.raw))

print("Ping :")
print(server.ping())

print("Query :")
query = server.query()
print(query.players.online)
print(query.players.max)
print(", ".join(query.players.names))

print(query.software.version)
print(query.software.brand)
print(query.software.plugins)
print(json.dumps(query.raw))
print(query.motd)
print(query.map)

Authorization

js Node.js
View 
// curl -u toto:password http://localhost:8000/
require('http').createServer((req, res) => {
  if (req.headers.authorization) {
    res.write(req.headers.authorization + "\n");
    let userPass = Buffer
      .from(req.headers.authorization.match(/Basic\s(.*)/i)[1], 'base64')
      .toString('ascii')
      .match(/(.*):(.*)/i);
    res.write(userPass[0] + "\n");
    res.write(userPass[1] + "\n");
    res.write(userPass[2] + "\n");
    res.end();
  } else {
    res.setHeader("WWW-Authenticate", "Basic realm=\"Authorization Required\", charset=\"UTF-8\"");
    res.writeHead(401, { 'Content-Type': 'application/json' });
    res.end('{ msg: "Authorization Required" }');
  }
}).listen(8000);
Basic dG90bzpwYXNzd29yZA==
toto:password
toto
password

Authorization php

php PHP
View 
if (!isset($_SERVER['PHP_AUTH_USER'])) {
  header('WWW-Authenticate: Basic realm="Auth require"');
  header('HTTP/1.0 401 Unauthorized');
  echo 'No authorization';
  exit;
} else {
  echo $_SERVER["HTTP_AUTHORIZATION"]."\n";
  preg_match('/Basic\s(.*)/i', $_SERVER["HTTP_AUTHORIZATION"], $authBase64);
  echo base64_decode($authBase64[1])."\n";
  echo $_SERVER["PHP_AUTH_USER"]."\n";
  echo $_SERVER["PHP_AUTH_PW"]."\n";
}
// curl -u toto:password http://localhost:8000/
Basic dG90bzpwYXNzd29yZA==
toto:password
toto
password

Send email

php PHP
View 
<?php
/*
composer.json
{
    "require": {
        "swiftmailer/swiftmailer": "^6.0"
    }
}
*/

require_once './vendor/autoload.php';

// Create the Transport
$transport = (new Swift_SmtpTransport('mail.infomaniak.com', 587, 'tls'))
  ->setUsername('poulpi@ppe.magicorp.fr')
  ->setPassword('password')
;

// Create the Mailer using your created Transport
$mailer = new Swift_Mailer($transport);

// Create a message
$message = (new Swift_Message('⁡'))
  ->setFrom(['test@magicorp.fr' => '⁡'])
  ->setTo(['charles@magicorp.fr' => 'charles'])
  ->setBody('⁡')
  ;

// Send the message
$result = $mailer->send($message);

Karp wallpaper

css CSS
View 
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-color: #FFFFFF;
  background-image: url("http://i.imgur.com/Q5xm8nd.gif");
  background-position: 0 0;
}

Css transform origine

css CSS
View 
#cube {
  background-color: red;
  height: 200px;
  width: 200px;
  display: inline-block;
  top: 100px;
  left: 100px;
  position: absolute;
  animation-delay: 10s;
  animation-duration: 10s;
  transform: rotate(20deg);
  transform-origin: -50% -50%;
}

SVG

svg SVG
View 
<svg width="200px" height="200px" viewBox="0 0 100 100">
  <circle style="stroke: #4285f4; transform-origin: center;" fill="none" stroke-width="6" stroke-linecap="round" cx="20" cy="20" r="15"></circle>
  <rect width="30" height="10" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" y="0" x="40"/>
  <ellipse cx="55" cy="25" rx="15" ry="6" style="fill:yellow;stroke:purple;stroke-width:2" />
  <line x1="40" y1="40" x2="50" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
  <polygon points="30,50 15,60 20,70 30,70" style="fill:lime;stroke:purple;stroke-width:1" />
  <text x="0" y="90" fill="red"> SVG!</text>
  <polyline points="40,60 45,65 60,40 80,70 80,80 90,90" style="fill:none;stroke:black;stroke-width:3" />
  <!-- path 
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath-->
</svg>
SVG!

Js prototype

html JavaScript
View 
<div id="output"></div>
<script>
  String.prototype.affiche = function () { // => function don't permit "this"
    document.getElementById('output').innerHTML = this;
  }
  let text1 = "Text to display one";
  let text2 = "Text to display two";
</script>
<button onclick="text1.affiche();">text1.affiche()</button>
<button onclick="text2.affiche();">text2.affiche()</button>

DOM propagation

html JavaScript
View 
  <h2>Box with propagation</h2>
  <div id="boxWithPropagation" class="box">
    <div>
      <div>
      </div>
    </div>
  </div>
  <h2>Box with propagation reverse</h2>
  <div id="boxWithPropagationReverse" class="box">
    <div>
      <div>
      </div>
    </div>
  </div>
  <h2>Box without propagation</h2>
  <div id="boxWithoutPropagation" class="box">
    <div>
      <div>
      </div>
    </div>
  </div>
  <script>
    // Box with propagation
    document.querySelector("#boxWithPropagation").addEventListener("click", () => {
      alert("parent box");
    }, false);
    document.querySelector("#boxWithPropagation > div").addEventListener("click", () => {
      alert("child box");
    }, false);
    document.querySelector("#boxWithPropagation > div > div").addEventListener("click", () => {
      alert("child of child box");
    }, false);

    // Box with propagation reverse
    document.querySelector("#boxWithPropagationReverse").addEventListener("click", () => {
      alert("parent box");
    }, true);
    document.querySelector("#boxWithPropagationReverse > div").addEventListener("click", () => {
      alert("child box");
    }, true);
    document.querySelector("#boxWithPropagationReverse > div > div").addEventListener("click", () => {
      alert("child of child box");
    }, true);

    // Box without propagation
    document.querySelector("#boxWithoutPropagation").addEventListener("click", e => {
      alert("parent box");
      e.stopPropagation();
    });
    document.querySelector("#boxWithoutPropagation > div").addEventListener("click", e => {
      alert("child box");
      e.stopPropagation();
    });
    document.querySelector("#boxWithoutPropagation > div > div").addEventListener("click", e => {
      alert("child of child box");
      e.stopPropagation();
    });
  </script>

Box with propagation

Box with propagation reverse

Box without propagation

Web notification

html JavaScript
View 
<script type="text/javascript">
  function notifyMe() {
    if (Notification.permission !== "granted")
      Notification.requestPermission();
    else
      new Notification('Notification for test', {
        icon: 'data:image/png;base64,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IAAEBAJAQCAABAQCQEAgAAQEAkBAIAAEBAJAQCAABAQCQEAgAAQEAkBAIAAEBAJAQCAABAQCQEAgAAQEAkBAIAAEBAJAQCAABAQCQEAgAAQEAkBAIAAEBAJAQCAABAQCQEAgAAQEAkBAIAAEBAJAQCAABAQCQEAgAAQEAkBAIAAEBAJAQCAABAQCQEAgAAQEAkBAIAAEBAJAQCAABAQCQEAgAAQEAkBAIAAEBAJAQCAABAQCQEAgAAQEAkBAIAAEBAJAQCAABAQCQEAgAAQEAkBAIAAEBAJAQCAABAQCQEAgAAQEAkBAIAAEBAJAQCAABAQCQEAgAAQEAkBAIAAEBAJAQCAABAQCQEAgAAQEAkBAIAAEBAJAQCAABAQCQEAgAAQEAkBAIAAEBAJAQCAABAQCQEAgAAQEAkBAIAAEBAJAQCAABAQCQEAgAAQEAkBAIAAEBAJAQCAABAQCQEAgAAQEAkBAIAAEBAJAQCAABAQCQEAgAAQEAkBAIAAEBAJAQCAABAQCQEAgAAQEAkBAIAAEBAJAQCAABAQCQEAgAAQEAkBAIAAEBAJAQCAABAQCQEAgAAQEAkBAIAAEBAJAQCAABAQCQEAgAAQEAkBAIAAEBAJAQCAABAQCQEAgAAQEAkBAIAAEBAJAQCAABAQCQEAgAAQEAkBAIAAEBAJAQCAABAQCQEAgAAQEAkBAIAAEBAJAQCAABAQCQEAgAAQEAkBAIAAEBAJAQCAABAQCQEAgAAQEAkBAIAAEBAJAQCAABAQCQEAgAAQEAkBAIAAEBAJAQCAABAQCQEAgAAQEAkBAIAAEBAJAQCAABAQCQEAgAGoplf8fCRAlRC/GkxYAAAAASUVORK5CYII=',
        body: "Test notification body!",
      }).addEventListener("click", () => window.open("https://magicorp.fr"));
  }
</script>
<button onclick="notifyMe()">Notify moi!</button>

In website notification

html JavaScript
View 
<style>
  #notification {
    max-height: 200px;
    right: 20px;
    top: 20px;
    position: fixed;
    pointer-events: none;
  }

  .notification {
    width: 350px;
    border-radius: 8px;
    padding: 12px;
    text-overflow: ellipsis;
    overflow: hidden;
    animation-name: animationNotification;
    animation-duration: 4s;
  }

  .notification_success {
    background-color: rgba(0, 204, 0, 0.8);
    border: 1px solid rgba(0, 214, 0, 1);
    color: rgb(0, 128, 0);
    margin: 4px;
  }

  .notification_error {
    background-color: rgba(204, 0, 0, 0.8);
    border: 1px solid rgba(214, 0, 0, 1);
    color: rgb(102, 0, 0);
    margin: 4px;
  }

  @keyframes animationNotification {
    0% { opacity: 0; }
    10% { opacity: 0.8; }
    20% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; }
  }
</style>

<button class="btn btn-success" onclick="successNotification()">Success notification</button>
<button class="btn btn-danger" onclick="errorNotification()">Error notification</button>
<div id="notification">
  <span></span>
</div>
<script>
  let notification = document.querySelector("#notification");

  function successNotification() {
    notification.insertAdjacentHTML('afterbegin',
      '<p class="notification notification_success">Success notification</p>');
    notification.firstElementChild.addEventListener('animationend',
      function () {
        this.parentNode.removeChild(this)
      });
  }

  function errorNotification() {
    notification.insertAdjacentHTML('afterbegin',
      '<p class="notification notification_error">Error notification</p>');
    notification.firstElementChild.addEventListener('animationend',
      function () {
        this.parentNode.removeChild(this)
      });
  };
</script>

Meta

html HTML
View 
<meta http-equiv="refresh" content="0.1; url=/">

Web geolocation

js JavaScript
View 
function getLocation() {
  if (navigator.geolocation)
    navigator.geolocation.getCurrentPosition(pos =>
      document.querySelector("#output").innerHTML = "Latitude: " + pos.coords.latitude +
      "<br>Longitude: " + pos.coords.longitude +
      "<br>Accuracy: " + pos.coords.accuracy +
      "<br>Altitude: " + pos.coords.altitude +
      "<br>Altitude accuracy: " + pos.coords.altitudeAccuracy +
      "<br>Heading: " + pos.coords.heading +
      "<br>Speed: " + pos.coords.speed
    );
  else
    document.querySelector("#output").innerHTML =
    "la geolocation apo n'es pas disponible dans cotre navigateur.";
}

Hexagone

html CSS
View 
<!-- https://ninjarockstar.dev/css-hex-grids/ -->
<style>
.hexagone {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: yellow;
  clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0);
  padding: 2rem 25%;
  text-align: center;
}
.cube {
  position: relative;
  display: inline-block;
  height: 100px;
  width: 100px;
  margin: 28px;
}
</style>
<div class="cube">
  <div class="hexagone">toto</div>
</div>
<div class="cube">
  <div class="hexagone">toto</div>
</div><!-- https://ninjarockstar.dev/css-hex-grids/ -->
<style>
.hexagone {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: yellow;
  clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0);
  padding: 2rem 25%;
  text-align: center;
}
.cube {
  position: relative;
  display: inline-block;
  height: 100px;
  width: 100px;
  margin: 28px;
}
</style>
<div class="cube">
  <div class="hexagone">toto</div>
</div>
<div class="cube">
  <div class="hexagone">toto</div>
</div>
toto
toto

CSS dark mode auto

css CSS
View 
:root {
  --color-background: #eee;
  --color-border: #cacfd5;
  --color-text-default: #0b1016;
  --color-base: #f4f5f6;
  --color-accent: #ba0d37; }

  @media (prefers-color-scheme: dark) {
  :root {
  --color-background: #38444c;
  --color-border: #697278;
  --color-text-default: #f0f2f3;
  --color-base: #293238;
  --color-accent: #ec1a62; }
}

body {
  background-color: var(--color-background);
  color: var(--color-text-default);
}
Text for test text color

Wake on LAN script

python Python
View 
#!/usr/bin/python
# envoi un packet avec 12 F plus 16 * l'address mac a une addres ip sur n'importe quelle port

import re
import socket
import struct

broadcast = "192.168.1.255"
mac = "30:9C:23:8F:86:6E"
port = 7

# debug
def debug(level, msg):
    print("%s" % msg)

def error(msg):
    debug(0, "ERREUR: %s" % msg)

def info(msg):
    debug(0, "INFO: %s" % msg)

# verification de l'adresse mac
nonhex = re.compile('[^0-9a-fA-F]')
mac = nonhex.sub('', mac)
if len(mac) != 12:
    error("L'adresse mac n'est pas bonne [%s]" % mac)
info("Envois du packet magique a : [%s]" % mac)

# 12 * F coller a 16 (ou +) * l'adresse mac
data = ''.join(['FFFFFFFFFFFF', mac * 16])

# data en binaire
send_data = ''
for i in range(0, len(data), 2):
    tmp_data = struct.pack('B', int(data[i: i + 2], 16))
    send_data = ''.join([send_data, str(tmp_data[0])])

# envoi
try:
    sock = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
    sock.setsockopt(socket.SOL_SOCKET, socket.SO_BROADCAST, 1)
    sock.sendto(send_data, (broadcast, port))
except:
    error("l'envois du packet n'a pas pus etre envoyer")

ASCII table

ascii
View 
┌─┬┐  ╔═╦╗
│ ││  ║ ║║
├─┼┤  ╠═╬╣
└─┴┘  ╚═╩╝

Get process stats with nodejs

js Node.js
View 
let child_process = require("child_process");

let PID = 6991;

child_process.exec("ps --pid " + PID + " -o %cpu,rss,vsz,%mem", (error, stdout, stderr) => {
  // prepare data before send
  let txt = stdout.replace(/\n$/i, "").split("\n"); // remove the last \n and split by \n
  let lbltxt = txt[0].split(/\s+/g); // split by change space chars
  let datatxt = txt[1].replace(/^\s+/g, "").split(/\s+/g); // remove the first space chars and split by space chars
  console.log(stdout);
  console.log(txt);
  console.log(lbltxt);
  console.log(datatxt);
  let psinfo = {};
  for (let i = 0; i < lbltxt.length; i++) {
    console.log(i + " " + lbltxt[i] + " " + datatxt[i]);
    psinfo[lbltxt[i]] = datatxt[i];
  }
  console.log(psinfo);
});
// infos

ps command

bash Linux
View 
ps --pid $PID -o %cpu,rss,vsz,%mem
ps --ppid $PID -o %cpu,rss,vsz,%mem

Get process executable path

bash Linux
View 
readlink -f /proc/$PID/exe

Get service info

bash Linux
View 
SERVICENAME=stest
systemctl --no-page show $SERVICENAME

Go to top

html HTML
View 
<style type='text/css'>
  @keyframes hvr-wobble-vertical {
    16.65% { transform: translateY(8px); }
    33.3% { transform: translateY(-6px); }
    49.95% { transform: translateY(4px); }
    66.6% { transform: translateY(-2px); }
    83.25% { transform: translateY(1px); }
    100% { transform: translateY(0); }
  }

  .wp-to-top:active,
  .wp-to-top:focus,
  .wp-to-top:hover {
    animation-name: hvr-wobble-vertical;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
  }

  .wp-to-top {
    display: inline-block;
    position: fixed;
    bottom: 40px;
    left: 10px;
    padding: 10px;
    background: #000;
    color: #fff;
    z-index: 999;
  }
</style>

<a href="#top" class="wp-to-top">go top</a>
go top

Keyframes loop in css

css CSS
View 
.obj{
  width: 80px;
  height: 80px;
  background-color: red;
  margin: 8px;
  -webkit-animation: anim 5s infinite;
  -moz-animation: anim 5s infinite;
  -o-animation: anim 5s infinite;
  animation: anim 5s infinite;
}
@keyframes anim {
  0% {background-color: red;}
  10% {background-color: orange;}
  20% {background-color: yellow;}
  40% {background-color: green;}
  60% {background-color: blue;}
  80% {background-color: indigo;}
  100% {background-color: purple;}
}

Mosaic css

html CSS
View 
<style>
  .mosaic {
    position: relative;
    background-color: blue;
    height: 402px;
    width: 402px;
    margin: auto;
  }

  .mosaic img {
    position: absolute;
    z-index: 2;
    background-color: red;
    display: block;
  }

  .mosaic img:nth-child(1) {
    width: 100px;
    height: 200px;
    top: 0;
    right: 0;
  }

  .mosaic img:nth-child(2) {
    width: 300px;
    height: 200px;
    top: 0;
    left: 0;
  }

  .mosaic img:nth-child(3) {
    width: 200px;
    height: 200px;
    bottom: 0;
    right: 0;
  }

  .mosaic img:nth-child(4) {
    width: 200px;
    height: 200px;
    bottom: 0;
    left: 0;
  }
</style>
<div class="mosaic">
  <img src="">
  <img src="">
  <img src="">
  <img src="">
</div>

Rand bg color for web page

js JavaScript
View 
let bg_colour = Math.floor(Math.random() * 16777215).toString(16);
bg_colour = "#" + ("000000" + bg_colour).slice(-6);
document.querySelector("#colorBox").style.backgroundColor = bg_colour;

Flip 3D

html CSS
View 
<style>
  .flip3D {
    width: 240px;
    height: 200px;
    margin: 10px;
    float: left;
  }

  .flip3D>.front {
    position: absolute;
    transform: perspective(600px) rotateY(0deg);
    background: #FC0;
    width: 240px;
    height: 200px;
    border-radius: 7px;
    backface-visibility: hidden;
    transition: transform .5s linear 0s;
  }

  .flip3D>.back {
    position: absolute;
    transform: perspective(600px) rotateY(180deg);
    background: #80BFFF;
    width: 240px;
    height: 200px;
    border-radius: 7px;
    backface-visibility: hidden;
    transition: transform .5s linear 0s;
  }

  .flip3D:hover>.front {
    transform: perspective(600px) rotateY(-180deg);
  }

  .flip3D:hover>.back {
    transform: perspective(600px) rotateY(0deg);
  }
</style>
<div class="flip3D">
  <div class="back">Box 1 - Back</div>
  <div class="front">Box 1 - Front</div>
</div>
Box 1 - Back
Box 1 - Front

HTML download

html HTML
View 
<a href="http://commodore.ca/arcade/tetris2.swf" download>download</a>

Base in js

js JavaScript
View 
document.querySelector('#result').innerHTML = parseInt(num, base).toString(newbase);
= __

Open local file

html JavaScript
View 
<video id="v"></video>
<input type="file" id="file" onchange="onChange()" >
<script type="text/javascript">
let URL = window.URL || window.webkitURL;
let video = document.querySelector('#v');
function onChange() {
  let file = document.querySelector('#file');
  video.src = URL.createObjectURL(file.files[0]);;
  video.load();
  video.addEventListener("loadeddata", () => video.play());
}
</script>

WScript

js Windows
View 
function Main(){
  CreateFile();

  // attend un temps
  WScript.Sleep(1000);

  // affiche un message
  WScript.Echo("un message");

  // affiche une propriéter de la class static WScript
  WScript.Echo(WScript.Path);

  ManipFiles();
  CreatePopup();
  DeleteFiles();
}

function CreateFile(){
  var fso, tf;
  fso = new ActiveXObject("Scripting.FileSystemObject");

  // créer un nouveau fichier
  tf = fso.CreateTextFile("testFile.txt", true);
  // écrit dans le fichier
  tf.WriteLine("Testing 1, 2, 3.") ;
  tf.WriteBlankLines(3) ;
  tf.Write ("This is a test.");
  tf.Close();
}

function CreatePopup() {
  var timeout = 6; // timeout
  var buttons = 3;  // OK
  var icon = 16; // Exclamation

  var shell = new ActiveXObject("WScript.Shell");
  shell.Popup("text ...", timeout, "window title", buttons + icon);
}

function ManipFiles(){
  var fso, f1, f2, f3;
  fso = new ActiveXObject("Scripting.FileSystemObject");

  // crée un fichier et écrit du text
  f1 = fso.CreateTextFile("testFile2.txt", true);
  f1.Write("This is a test.");
  f1.Close();

  // récupére un fichier
  f2 = fso.GetFile("testFile2.txt");

  WScript.Sleep(4000);
  // déplacée/renomer
  f2.Move("testFile3.txt");

  WScript.Sleep(4000);
  // copy le fichier
  f2.Copy("testFile4.txt");
}

function DeleteFiles() {
  var fso, f1, f2, f3;
  fso = new ActiveXObject("Scripting.FileSystemObject");

  // supprime les fichier
  f1 = fso.GetFile("testFile.txt");
  f2 = fso.GetFile("testFile3.txt");
  f3 = fso.GetFile("testFile4.txt");
  f1.Delete();
  f2.Delete();
  f3.Delete();
}

Main();

// Button Types
//
// Value Description
// 0   OK button.
// 1   OK and Cancel buttons.
// 2   Abort, Retry, and Ignore buttons.
// 3   Yes, No, and Cancel buttons.
// 4   Yes and No buttons.
// 5   Retry and Cancel buttons.
//
// Icon Types
//
// Value Description
// 16  "Stop Mark" icon.
// 32  "Question Mark" icon.
// 48  "Exclamation Mark" icon.
// 64  "Information Mark" icon.
//
// Possible values for IntButton the return value:
//
// Value Description
// 1  OK button
// 2  Cancel button
// 3  Abort button
// 4  Retry button
// 5  Ignore button
// 6  Yes button
// 7  No button

Toggle fullscreen html element

js JavaScript
View 
function toggleFullScreen(elem) {
  if (document.fullScreenElement || document.mozFullScreenElement || document.webkitIsFullScreen) {
    if (document.cancelFullScreen) document.cancelFullScreen();
    else if (document.mozCancelFullScreen) document.mozCancelFullScreen();
    else if (document.webkitCancelFullScreen) document.webkitCancelFullScreen();
  } else {
    if (elem.requestFullScreen) elem.requestFullScreen();
    else if (elem.mozRequestFullScreen) elem.mozRequestFullScreen();
    else if (elem.webkitRequestFullScreen) elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
  }
}

Menu html

html HTML
View 
<style>
  .mvs {
    margin: 2px;
    display: inline-flex;
    background-color: #fff;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    overflow: hidden;
  }

  .mvs a {
    color: #555;
    text-decoration: none;
    padding: 12.5px 8px 12.5px 8px;
    box-shadow: 0 0 1px rgba(0, 0, 0, .1);
    overflow: hidden;
  }
</style>
<div class="mvs">
  <a href="/">Accueil</a>
  <a href="http://pastebin.com/wXxRjLSN">Roboto</a>
</div>
Accueil Roboto

Context menu in web

html JavaScript
View 
<style>
  .context {
    position: absolute;
  }
  .elm-menu {
    margin: 8px;
    padding: 0 4px;
  }

  .elm-menu:hover {
    background-color: #eee;
  }

  .elm {
    height: 100px;
    width: 100px;
    margin: 8px;
    padding: 0 4px;
    background-color: yellow;
    color: blue;
  }

  .cmenu {
    background-color: #fff;
    z-index: 2300;
    display: block;
    position: absolute;
    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
    text-decoration: none;
    cursor: default;
    margin-top: -4px;
    min-height: 50px;
    min-width: 100px;
    max-height: 640px;
  }
</style>
<div id="cmenu" class="cmenu" style="display:none">
  <div class="elm-menu">default</div>
  <div class="elm-menu">menu</div>
</div>
<div id="cmenu1" class="cmenu" style="display:none">
  <div class="elm-menu">elm1</div>
  <div class="elm-menu">menu</div>
  <div class="elm-menu">contextuel</div>
</div>
<div id="cmenu2" class="cmenu" style="display:none">
  <div class="elm-menu">elm2</div>
  <div class="elm-menu">menu</div>
  <div class="elm-menu">contextuel</div>
</div>
<div class="context">
  <div data-menu="#cmenu">Text for test default menu</div>
  <div data-menu="#cmenu1" class="elm">Box for test menu 1</div>
  <div data-menu="#cmenu2" class="elm">Box for test menu 2</div>
</div>
<script>
  let context = document.querySelector(".context");
  context.addEventListener('contextmenu', elem => {
    elem.preventDefault();

    // Show menu
    document.querySelectorAll(".cmenu").forEach(i => i.style.display = "none");
    if (!elem.srcElement.dataset.menu) return;
    let menu = document.querySelector(elem.srcElement.dataset.menu)
    menu.style.display = "block";
    let mouse = (() => {
      console.log(elem);
      if (elem.layerX || elem.layerY)
        return {
          x: elem.layerX + 10,
          y: elem.layerY + 10
        }
      return {
        x: 0,
        y: 0
      }
    })();

    menu.style.left = (context.innerWidth - mouse.x < menu.offsetWidth) ?
      context.innerWidth - menu.offsetWidth + "px" : mouse.x + "px";

    menu.style.top = (context.innerHeight - mouse.y < menu.offsetHeight) ?
      context.innerHeight - menu.offsetHeight + "px" :
      mouse.y + "px";
  });
  context.addEventListener('click', () =>
    document.querySelectorAll(".cmenu").forEach(i => i.style.display = "none")
  );
</script>
Text for test default menu
Box for test menu 1
Box for test menu 2

RefExp

js JavaScript
View 
let str = document.querySelector('#text').value
let patt = new RegExp(document.querySelector('#patt').value);
document.querySelector("#resultTest").innerHTML = patt.test(str);
document.querySelector("#resultExec").innerHTML = patt.exec(str);
Pattern match : Result :

My word at me

html JavaScript
View 
    <style>
    .contents{
      width: 80%;
      height: 600px;
      margin: 50px 8px 8px 8px;
      padding: 8px;
      min-height: 60px;
      background-color: #fff;
      outline: none;
    }
    #toolbar{
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      overflow-x: auto;
      content: "";
      display: table;
      width: max-content;
      overflow: hidden;
      border: 1px solid #ccc;
      color: #000;
      background-color: #f1f1f1;
      position: fixed;
      top: 0;
      z-index: 1;
      margin: 8px;
    }
    #bm i{
      top: -147px;
      left: 0px;
      position: absolute;
      content: url(toolbarIconGoogle.png);
    }
    #ul i{
      top: -84px;
      left: -21px;
      position: absolute;
      content: url(toolbarIconGoogle.png);
    }
    #ol i{
      top: -84px;
      left: 0px;
      position: absolute;
      content: url(toolbarIconGoogle.png);
    }
    #sup i{
      top: -126px;
      left: -21px;
      position: absolute;
      content: url(toolbarIconGoogle.png);
    }
    #sub i{
      top: -126px;
      left: 0px;
      position: absolute;
      content: url(toolbarIconGoogle.png);
    }
    #bold i{
      top: -1px;
      left: 0px;
      position: absolute;
      content: url(toolbarIconGoogle.png);
    }
    #italic i{
      top: -146px;
      left: -21px;
      position: absolute;
      content: url(toolbarIconGoogle.png);
    }
    #underline i{
      top: -21px;
      left: 0px;
      position: absolute;
      content: url(toolbarIconGoogle.png);
    }
    #strike i{
      top: -22px;
      left: -21px;
      position: absolute;
      content: url(toolbarIconGoogle.png);
    }
    #remove i{
      top: 0px;
      left: -21px;
      position: absolute;
      content: url(toolbarIconGoogle.png);
    }
    #link i{
      top: -166px;
      left: -21px;
      position: absolute;
      content: url(toolbarIconGoogle.png);
    }
    #image i{
      top: -167px;
      left: 0px;
      position: absolute;
      content: url(toolbarIconGoogle.png);
    }
    #Center i{
      top: -42px;
      left: -21px;
      position: absolute;
      content: url(toolbarIconGoogle.png);
    }
    #Full i{
      top: -42px;
      left: -0px;
      position: absolute;
      content: url(toolbarIconGoogle.png);
    }
    #Left i{
      top: -62px;
      left: 0px;
      position: absolute;
      content: url(toolbarIconGoogle.png);
    }
    #Right i{
      top: -62px;
      left: -21px;
      position: absolute;
      content: url(toolbarIconGoogle.png);
    }
    #undo i{
      top: -105px;
      left: 0px;
      position: absolute;
      content: url(toolbarIconGoogle.png);
    }
    #redo i{
      top: -105px;
      left: -21px;
      position: absolute;
      content: url(toolbarIconGoogle.png);
    }
    #video i{
      top: -187px;
      left: 60px;
      position: absolute;
      content: url(toolbarIconGoogle.png);
    }
    #fontName{
      height: 23px;
    }
    #fontName option{
      background-color: #fff;
    }
    .item-m-i{
      width: 21px;
      height: 21px;
    }
    .item-m{
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      cursor: pointer;
      white-space: normal;
      margin: 4px;
      float: left;
      border: 1px solid rgba(0, 0, 0, 0);
      border-radius: 4px;
      display: block;
      vertical-align: middle;
      overflow: hidden;
      text-decoration: none;
      background-color: inherit;
      text-align: center;
      cursor: pointer;
      position: relative;
    }
    .item-m:hover{
      border: 1px solid #ccc;
    }
    .am{
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      cursor: pointer;
      background-color: inherit;
      border-radius: 4px;
      border: 1px solid rgba(0,0,0,0);
    }
    .am:hover {
      border: 1px solid #aaa;
    }
    .am:hover .aam{
      border-left: 1px solid #aaa;
    }
    .m{
      display: none;
      position: fixed;
      background-color: #fff;
      top: 30px;
      z-index: 1;
      margin: 0px;
      border-radius: 4px;
      border: 1px solid #ccc;
    }
    .aam{
      display: initial;
      border-left: 1px solid rgba(0,0,0,0);
    }
    input[type=color]{
      width: 60px;
    }
    .modal{
      background-color: white;
      height: 100px;
      width: 200px;
      position: fixed;
      z-index: 101;
      top: calc(50% - 50px);
      left: calc(50% - 100px);
      display: none;
    }
    #modal-bg{
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0px;
      left: 0px;
      background-color: rgba(0,0,0,0.5);
      z-index: 100;
      display: none;
    }
    </style>
  <div>
    <div id="toolbar">
      <a class="item-m item-m-i" id="undo"><i></i></a>
      <a class="item-m item-m-i" id="redo"><i></i></a>
      <div class="item-m item-m-i" id="bm"><i class="aam"></i>
        <div class="m" id="m">
          <div class="item-m" id="p">normal</div>
          <a class="item-m" id="h1">Titre1</a>
          <a class="item-m" id="h2">Titre2</a>
          <a class="item-m" id="h3">Titre3</a>
          <a class="item-m" id="h4">Titre4</a>
          <a class="item-m" id="h5">Titre5</a>
        </div>
      </div>
      <select class="item-m" id="fontName">
        <option value="Arial">Arial</option>
        <option value="Calibri">Calibri</option>
        <option value="Comic Sans MS">Comic Sans MS</option>
      </select>
      <a class="item-m item-m-i" id="bold"><i></i></a>
      <a class="item-m item-m-i" id="italic"><i></i></a>
      <a class="item-m item-m-i" id="underline"><i></i></a>
      <a class="item-m item-m-i" id="strike"><i></i></a>
      <div class="item-m am" id="color">color
        <div class="aam" id="bm1">&#x25BE;
          <div class="m" id="m1">
            <input class="item-m aam" type="color" id="textcolor">
          </div>
        </div>
      </div>
      <div class="item-m am" id="bgColor">bgcolor
        <div class="aam" id="bm2">&#x25BE;
          <div class="m" id="m2">
            <input class="item-m aam" type="color" id="backgColor">
          </div>
        </div>
      </div>
      <a class="item-m item-m-i" id="Left"><i></i></a>
      <a class="item-m item-m-i" id="Center"><i></i></a>
      <a class="item-m item-m-i" id="Right"><i></i></a>
      <a class="item-m item-m-i" id="Full"><i></i></a>
      <a class="item-m item-m-i" id="ul"><i></i></a>
      <a class="item-m item-m-i" id="ol"><i></i></a>
      <a class="item-m item-m-i" id="sup"><i></i></a>
      <a class="item-m item-m-i" id="sub"><i></i></a>
      <a class="item-m item-m-i" id="remove"><i></i></a>
      <a class="item-m item-m-i" id="link"><i></i></a>
      <a class="item-m item-m-i" id="image"><i></i></a>
      <a class="item-m" style="width: 80px; text-align: left;" id="video">video &<i></i></a>
  </div>
  <div class="modal" id="modal-link"><div>Entre ton lien :</div><div id="url-m" contenteditable=true></div><button id="btn-link">valider</button></div>
  <div class="modal" id="modal-img"><div></div><button id="btn-img">valider</button></div>
  <div class="modal" id="modal-src"><div>Entre ton code :</div><div id="code-m" contenteditable=true></div><button id="btn-src">valider</button></div>
  <div id="modal-bg"></div>
  <div autofocus class="contents" contenteditable=true>ew ew fweafs d fdfdsaa sfdsadf<div align="center"><img src="http://chris.photobooks.com/tests/rte/moz_resizing/testImage.jpg" alt="Test Image" width="233" height="211"><img src="http://chris.photobooks.com/tests/rte/moz_resizing/testImage.jpg" alt="Test Image" width="234" height="211"> </div><div align="center" style="text-align: left;">asdfkasifjaskdfkosakdflaskfdlasdfas</div><div align="center" style="text-align: left;">&nbsp;fasdf</div><div align="center" style="text-align: left;">sadf asdf asldkfjhuygusidf aojsf asdf sahdfijohasidfh iashdhasiudfhaushdfuhasdfuihasiudfhuiashfiuhasdfa</div><div align="center" style="text-align: left;">sfasmdf nisadifhasidfasdfijasidfjashdf ijasidfjoiasjdfoiasdf</div><div align="center" style="text-align: left;">as dfAsdf nasjiodfhni asdfuias dfhasd fashdfafjas dfasd f</div><div align="center" style="text-align: left;">asdf&nbsp;</div><div align="center" style="text-align: left;">asdfasdfasdf asdfasdfasdfasdfasdf asdfasdfa sdgfa sdfasdfas df</div><div align="center" style="text-align: left;">asdfasdfasdbfu gasdfashdf asjhd ihasdijfhasidhfuashdioasfajsoijfasijfas</div></div></div>
  <script>
  var contadd;
  setInterval(function() {
    if (document.queryCommandValue('bold')=='false') {
      $("#bold").css("border", "1px solid rgba(0, 0, 0, 0)").css("background-color", "inherit");
    }else {
      $("#bold").css("border", "1px solid #ccc").css("background-color", "#ccc");
    }
    if (document.queryCommandValue('italic')=='false') {
      $("#italic").css("border", "1px solid rgba(0, 0, 0, 0)").css("background-color", "inherit");
    }else {
      $("#italic").css("border", "1px solid #ccc").css("background-color", "#ccc");
    }
    if (document.queryCommandValue('underline')=='false') {
      $("#underline").css("border", "1px solid rgba(0, 0, 0, 0)").css("background-color", "inherit");
    }else {
      $("#underline").css("border", "1px solid #ccc").css("background-color", "#ccc");
    }
    if (document.queryCommandValue('StrikeThrough')=='false') {
      $("#strike").css("border", "1px solid rgba(0, 0, 0, 0)").css("background-color", "inherit");
    }else {
      $("#strike").css("border", "1px solid #ccc").css("background-color", "#ccc");
    }
    if (document.queryCommandValue('InsertUnorderedList')=='false') {
      $("#ul").css("border", "1px solid rgba(0, 0, 0, 0)").css("background-color", "inherit");
    }else {
      $("#ul").css("border", "1px solid #ccc").css("background-color", "#ccc");
    }
    if (document.queryCommandValue('InsertOrderedList')=='false') {
      $("#ol").css("border", "1px solid rgba(0, 0, 0, 0)").css("background-color", "inherit");
    }else {
      $("#ol").css("border", "1px solid #ccc").css("background-color", "#ccc");
    }
    if (document.queryCommandValue('superscript')=='false') {
      $("#sup").css("border", "1px solid rgba(0, 0, 0, 0)").css("background-color", "inherit");
    }else {
      $("#sup").css("border", "1px solid #ccc").css("background-color", "#ccc");
    }
    if (document.queryCommandValue('subscript')=='false') {
      $("#sub").css("border", "1px solid rgba(0, 0, 0, 0)").css("background-color", "inherit");
    }else {
      $("#sub").css("border", "1px solid #ccc").css("background-color", "#ccc");
    }
    if (document.queryCommandValue('justifyCenter')=='false') {
      $("#Center").css("border", "1px solid rgba(0, 0, 0, 0)").css("background-color", "inherit");
    }else {
      $("#Center").css("border", "1px solid #ccc").css("background-color", "#ccc");
    }
    if (document.queryCommandValue('justifyFull')=='false') {
      $("#Full").css("border", "1px solid rgba(0, 0, 0, 0)").css("background-color", "inherit");
    }else {
      $("#Full").css("border", "1px solid #ccc").css("background-color", "#ccc");
    }
    if (document.queryCommandValue('justifyLeft')=='false') {
      $("#Left").css("border", "1px solid rgba(0, 0, 0, 0)").css("background-color", "inherit");
    }else {
      $("#Left").css("border", "1px solid #ccc").css("background-color", "#ccc");
    }
    if (document.queryCommandValue('justifyRight')=='false') {
      $("#Right").css("border", "1px solid rgba(0, 0, 0, 0)").css("background-color", "inherit");
    }else {
      $("#Right").css("border", "1px solid #ccc").css("background-color", "#ccc");
    }
    $("#color").css("color", document.queryCommandValue ('ForeColor'));
    $("#bgColor").css("color", document.queryCommandValue ('backColor'));
  },100)
  var x = true;
  var mod = true;
  $('#link').click( function() {
    mod = false;
    $('#modal-link').show();
    $('#modal-bg').show();
  });
  $('#image').click( function() {
    mod = false;
    $('#modal-img').show();
    $('#modal-bg').show();
  });
  $('#video').click( function() {
    mod = false;
    $('#modal-src').show();
    $('#modal-bg').show();
  });
  $('.contents').focus();
  $('.contents').on('blur',function(){
    if (mod) {
      $('.contents').focus();
    }
  });
  $("body").click( function(e) {
    if (!$(e.target).hasClass("aam")) {
      $('.m').hide();
    }
  })
  $('#bm').children().click(function() {
    $('.m').hide();
    if (x) {
      document.getElementById('m').style.display = "grid";
      x = false;
    }else {
      $('#m').hide();
      x = true;
    }
  })
  $('#bm1').click(function() {
    $('.m').hide();
    $('#m1').toggle();
  })
  $('#bm2').click( function() {
    $('.m').hide();
    $('#m2').toggle();
  })
  $('#p').on('click', function() {
    methods.formatBlock.apply(this, ["<p>"]);
  })
  $('#h1').on('click', function() {
    methods.formatBlock.apply(this, ["<h1>"]);
  })
  $('#h2').on('click', function() {
    methods.formatBlock.apply(this, ["<h2>"]);
  })
  $('#h3').on('click', function() {
    methods.formatBlock.apply(this, ["<h3>"]);
  })
  $('#h4').on('click', function() {
    methods.formatBlock.apply(this, ["<h4>"]);
  })
  $('#h5').on('click', function() {
    methods.formatBlock.apply(this, ["<h5>"]);
  })
  $('#ul').on('click', function() {
    methods.unorderedList.apply(this);
  })
  $('#ol').on('click', function() {
    methods.orderedList.apply(this);
  })
  $('#sup').on('click', function() {
    methods.superscript.apply(this);
  })
  $('#sub').on('click', function() {
    methods.subscript.apply(this);
  })
  $('#bold').on('click', function() {
    methods.bold.apply(this);
  })
  $('#italic').on('click', function() {
    methods.italic.apply(this);
  })
  $('#underline').on('click', function() {
    methods.underline.apply(this);
  })
  $('#strike').on('click', function() {
    methods.strike.apply(this);
  })
  $('#remove').on('click', function() {
    methods.removeFormat.apply(this);
  })
  $('#btn-link').on('click', function() {
    mod = true;
    $('.contents').focus();
    $('.modal').hide();
    $('#modal-bg').hide();
    methods.createLink.apply(this, [$('#url-m').html()]);
    $('#url-m').html("");
  })
  $('#btn-img').on('click', function() {
    mod = true;
    $('.contents').focus();
    $('.modal').hide();
    $('#modal-bg').hide();
    methods.insertImage.apply(this, [$('#').html()]);
    $('#url-m').html("");
  })
  $('#btn-src').on('click', function() {
    mod = true;
    $('.contents').focus();
    $('.modal').hide();
    $('#modal-bg').hide();
    methods.insertVideo.apply(this, [$('#code-m').html()]);
    $('#code-m').html("");
  })
  $('#Center').on('click', function() {
    methods.justifyCenter.apply(this);
  })
  $('#Full').on('click', function() {
    methods.justifyFull.apply(this);
  })
  $('#Left').on('click', function() {
    methods.justifyLeft.apply(this);
  })
  $('#Right').on('click', function() {
    methods.justifyRight.apply(this);
  })
  $('#color').on('click', function() {
    methods.textcolor.apply(this, [$('#textcolor').val()])
  })
  $('#bgColor').on('click', function() {
    methods.backgColor.apply(this, [$('#backgColor').val()])
  })
  $('#undo').on('click', function() {
    methods.undo.apply(this)
  })
  $('#redo').on('click', function() {
    methods.redo.apply(this)
  })
  $('#textcolor').on('change', function(){
    methods.textcolor.apply(this, [$(this).val()]);
  })
  $('#backgColor').on('change', function(){
    methods.backgColor.apply(this, [$(this).val()]);
  })
  $('#fontName').on('change', function(){
    methods.fontName.apply(this, [$(this).val()]);
  })
  var methods = {
    bold: function() {
      document.execCommand("bold", false, null);
    },
    italic: function() {
      document.execCommand("italic", false, null);
    },
    underline: function() {
      document.execCommand("underline", false, null);
    },
    strike: function() {
      document.execCommand("StrikeThrough", false, null);
    },
    orderedList: function() {
      document.execCommand("InsertOrderedList", false, null);
    },
    unorderedList: function() {
      document.execCommand("InsertUnorderedList", false, null);
    },
    superscript: function() {
      document.execCommand("superscript", false, null);
    },
    subscript: function() {
      document.execCommand("subscript", false, null);
    },
    createLink: function(contadd) {
      document.execCommand("createLink", false, contadd);
    },
    insertImage: function(contadd) {
      document.execCommand("InsertImage", false, contadd);
    },
    insertVideo: function(contadd) {
      document.execCommand('insertHTML', false, contadd);
    },
    formatBlock: function(block) {
      document.execCommand("FormatBlock", null, block);
    },
    removeFormat: function() {
      document.execCommand("removeFormat", false, null);
    },
    textcolor: function(color) {
      document.execCommand("ForeColor", false, color);
    },
    backgColor: function(color) {
      document.execCommand("backColor", false, color);
    },
    justifyCenter: function() {
      document.execCommand("justifyCenter", false, null);
    },
    justifyFull: function() {
      document.execCommand("justifyFull", false, null);
    },
    justifyLeft: function() {
      document.execCommand("justifyLeft", false, null);
    },
    justifyRight: function() {
      document.execCommand("justifyRight", false, null);
    },
    undo: function() {
      document.execCommand("undo", false, null);
    },
    redo: function() {
      document.execCommand("redo", false, null);
    },
    fontName: function(font) {
      document.execCommand("fontName", false, font);
    }
  }
  document.execCommand("enableObjectResizing", false, true);
  // TODO: img redimention, orderedList...
  </script>
color
▾
bgcolor
▾
video &
ew ew fweafs d fdfdsaa sfdsadf
Test ImageTest Image
asdfkasifjaskdfkosakdflaskfdlasdfas
 fasdf
sadf asdf asldkfjhuygusidf aojsf asdf sahdfijohasidfh iashdhasiudfhaushdfuhasdfuihasiudfhuiashfiuhasdfa
sfasmdf nisadifhasidfasdfijasidfjashdf ijasidfjoiasjdfoiasdf
as dfAsdf nasjiodfhni asdfuias dfhasd fashdfafjas dfasd f
asdf 
asdfasdfasdf asdfasdfasdfasdfasdf asdfasdfa sdgfa sdfasdfas df
asdfasdfasdbfu gasdfashdf asjhd ihasdijfhasidhfuashdioasfajsoijfasijfas

Image zoom

html JavaScript
View 
<img src="img/kitten.jpg" alt="kitten" id="kitty">
<div id="view" style="background-image: url('img/kitten.jpg')"></div>
<script>
  document.querySelector("#kitty").addEventListener("mousemove", function (e) {
    document.querySelector("#view").style.backgroundPosition = (((-e.offsetX) * 2) + 50) + "px " + (((-e.offsetY) * 2) + 50) + "px";
  });
</script>
kitten

Scss chat UI

scss CSS
View 
.chat {
  width: 500px;
  height: 334px;
  padding: 8px;
  position: relative;
  box-shadow: 1px 0 5px 0 rgba(0, 0, 0, 0.2), 1px 0 5px 0 rgba(0, 0, 0, 0.2), 1px 0 5px 0 rgba(0, 0, 0, 0.2);

  .messagebox {
    width: 500px;
    height: 300px;
    overflow: auto;
    box-shadow: inset 1px 0 5px 0 rgba(0, 0, 0, 0.2), inset 1px 0 5px 0 rgba(0, 0, 0, 0.2), inset 1px 0 5px 0 rgba(0, 0, 0, 0.2);

    .message {
      margin: 8px;
    }
  }

  .newmessage {
    margin-top: 8px;
    display: flex;

    #newmessagefeild {
      width: 455px;
      height: 22px;
      border-top-left-radius: 8px;
      border-bottom-left-radius: 8px;
      resize: none;
    }

    button {
      width: 40px;
      height: 28px;
      line-height: 0px;
      font-size: 30px;
      border-top-right-radius: 8px;
      border-bottom-right-radius: 8px;
    }
  }

  ::-webkit-scrollbar {
    height: 4px;
    width: 4px;
  }

  ::-webkit-scrollbar:hover {
    height: 15px;
    width: 15px;
  }

  ::-webkit-scrollbar-track {
    background: #D2D2D2;
  }

  ::-webkit-scrollbar-thumb {
    background: #4f4f4f;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #111;
  }

  .messagebox:hover::-webkit-scrollbar {
    width: 15px;
  }
}

Webcam with Node.js

js Node.js
View 
// install with npm node-webcam
let NodeWebcam = require( "node-webcam" );
let fs = require("fs");

let opts1 = {
    width: 1280,
    height: 720,
    quality: 100,
    delay: 0,
    saveShots: false,
    output: "jpeg",
    device: false,
    verbose: false,
    callbackReturn: "base64"
};

NodeWebcam.capture( "test_picture", opts1, function( err, data ) {
    let imagehtml = "<img src='" + data + "'>";
    fs.writeFile("image.html", imagehtml, (err) => { if(err) throw err });
});

SEO meta

html SEO
View 
<!-- in search engine -->
<meta name="title" property="title" content="KARP meta Titre" />
<meta name="description" property="description" content="KARP une meta description avec des mots pour faire une phrase un peut longue" />

<!-- in card -->
<meta property="og:title" content="KARP Titre" />
<meta property="og:description" content="KARP description avec des mots pour faire une phrase un peut longue" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://dev.magicorp.fr:8888/" />
<meta property="og:image" content="http://dev.magicorp.fr:8888/karp.png" />
<meta property="og:site_name" content="magicorp" />

<!-- in card: image detail -->
<meta property="og:image:url" content="http://dev.magicorp.fr:8888/karp.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="400" />
<meta property="og:image:alt" content="une image de magikarp" />

<meta name="theme-color" content="#00FFFF">

<meta name="twitter:card" content="summary_large_image">

<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="magicorp" />
<meta name="twitter:creator" content="charles66820" />

SEO robots.txt example

txt SEO
View 
User-agent: Twitterbot
Disallow:

User-agent: *
Disallow: /karp.png

Sitemap: http://dev.magicorp.fr:8888/sitemap.xml

SEO sitemap.xml example

xml SEO
View 
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>http://dev.magicorp.fr/</loc>
    <lastmod>2018-12-02T18:31:13+00:00</lastmod>
    <priority>1.00</priority>
  </url>
  <url>
    <loc>http://dev.magicorp.fr/toto</loc>
    <lastmod>2018-12-02T18:31:13+00:00</lastmod>
    <priority>0.80</priority>
  </url>
  <url>
    <loc>http://dev.magicorp.fr/tutu</loc>
    <lastmod>2018-12-02T18:31:13+00:00</lastmod>
    <priority>0.80</priority>
  </url>
  <url>
    <loc>http://dev.magicorp.fr/tata</loc>
    <lastmod>2018-12-02T18:31:13+00:00</lastmod>
    <priority>0.80</priority>
  </url>
</urlset>

PHP tricks

php PHP
View 
<?php
ini_set('error_reporting', E_ALL); // or error_reporting(E_ALL);
ini_set('display_error', 1); // enable error

ignore_user_abort(true); // Disable script die on client close connexion
set_time_limit(0); // Disable timeout

header('Content-Type: text/plain');
header('Connection: Keep-Alive');
header('X-Content-Type-Options: nosniff'); // Permit chunks

ob_start(); // Start buffer (no send data)
echo $_SERVER['REQUEST_SCHEME']?? 'http'.'://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']."\n"; // Current URL
ob_clean(); // Clean buffer (remove all buffer data)
echo $_SERVER['REMOTE_ADDR']."\n"; // Client IP address
ob_end_flush(); // Flush buffer (send buffer and clean is)

echo shell_exec('ls -a'); // Execute command

while (true) {
  ob_end_flush(); // Flush buffer and stop it for send data
  echo "msg\n"; // Add data to buffer
  usleep(40000); // Wait small time
  ob_start(); // Start buffer
}
127.0.0.1
.
..
tricks.php
msg
msg
msg
msg
msg
msg
msg
msg
msg
...

Image file to URI base64

php PHP
View 
<?php
$image = './uri.jpeg';
// Read image path, convert to base64 encoding
$imageData = base64_encode(file_get_contents($image));

// Format image to URI data:{mime};base64,{data};
$src = 'data: '.mime_content_type($image).';base64,'.$imageData;

echo '<img src="'.$src.'">';

Load image on client side

html JavaScript
View 
<input type="file" onchange="updateUri(event)">
<img id="output">
<script>
  function updateUri(e) {
    if (!e.target.files && !e.target.files[0]) return;

    let reader = new FileReader(); // Create render
    reader.addEventListener("load", () =>
      // On data loaded on render add result to image element
      document.querySelector('#output').src = reader.result
    );

    reader.readAsDataURL(e.target.files[0]);
  }
</script>

Get time

js JavaScript
View 
setInterval(
  () =>
    document.querySelector("#clock").innerHTML = (new Date()).toUTCString(),
  1000
);

Internet status

js JavaScript
View 
setInterval(
  () => document.querySelector("#internetstatue").innerHTML = navigator.onLine? "online" : "offline", 
  1000
);
// or
window.addEventListener('online', (event) =>
  document.querySelector("#internetstatue").innerHTML = "online" 
);
window.addEventListener('offline', (event) =>
  document.querySelector("#internetstatue").innerHTML = "offline" 
);
Statue :
calcule en coure

Show / hide HTML element

html JavaScript
View 
<button onclick="toggleElem(event)">hide</button>
<div style="height: 100px; width: 100px; background-color: red;" id="block"></div>
<script>
  function toggleElem(e) {
    if (e.target.innerText != "show") {
      document.querySelector("#block").style.display = "none";
      e.target.innerText = "show";
    } else {
      document.querySelector("#block").style.display = "block";
      e.target.innerText = "hide";
    }
  }
</script>

Editable HTML element

html HTML
View 
<style>
  #comment {
    min-height: 50px;
    max-height: 100px;
    width: 500px;
  }
  .edit {
    box-sizing: border-box;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
  }
</style>

<div id="comment" contenteditable="false">Text for test editable element</div>
<button onClick="toggleEdit(event)">Edit</button>

<script>
  function toggleEdit(e){
    let comment = document.querySelector("#comment");
    if (comment.contentEditable == "true") {
      comment.contentEditable = "false";
      e.target.innerHTML = "Edit";
      comment.classList.remove("edit");
    } else {
      comment.contentEditable = "true";
      e.target.innerHTML = "Done";
      comment.classList.add("edit");
    }
  }
</script>
Text for test editable element

Log_b(a)

html Math
View 
<p>Log : <input id="a" type="text"/>(<input id="b" type="text"/>)= <label id="result"></label></p>
<button onClick="logCalc()">validé</button>
<script>
  function logCalc(){
    let a = document.querySelector('#a').value;
    let b = document.querySelector('#b').value;
    document.querySelector('#result').innerHTML = Math.log(a) / Math.log(b);
  }
</script>

Log : ()=

Decimal to fraction

html Math
View 
<input type="text" id="decimal" />
<button type="button" onClick="decimal2fraction()">Calculer</button>
<label id="result">...</label>
<script>
  function decimal2fraction() {
    var value = document.querySelector('#decimal').value;
    var best_number = 1;
    var best_denom = 1;
    var best_err = Math.abs(value - best_number / best_denom);
    for (var denom = 1; denom <= 10000; denom++) {
      var number = Math.round(value * denom);
      var err = Math.abs(value - number / denom);
      if (err < best_err) {
        best_number = number;
        best_denom = denom;
        best_err = err;
        document.querySelector("#result").innerText = "result : " + best_number + " / " + best_denom + " = " + (best_number / best_denom);
      }
    }
  }
</script>

Timer (setInterval, OOP in js)

html JavaScript
View 
<div id="timer">00:00:00</div>
<button onClick="toggleTimer(event)">start</button>
<button onClick="timer.reset()">Reset</button>
<script>
  class Timer {
    constructor() {
      this.heurs = 0;
      this.minute = 0;
      this.seconde = 0;
      this.interval = null;
    }
    start() {
      if (!this.interval)
        this.interval = setInterval(() => {
          if (this.seconde >= 59) {
            ++this.minute;
            this.seconde = 0;
          } else ++this.seconde;
          if (this.minute >= 59) {
            ++this.heurs;
            this.minute = 0;
          }
          this.elem.innerText =
          (this.heurs < 10? "0" : "") + this.heurs + ":" +
          (this.minute < 10? "0" : "") + this.minute + ":" +
          (this.seconde < 10? "0" : "") + this.seconde;
        }, 1000);
    }
    stop() {
      if (this.interval) clearInterval(this.interval);
      this.interval = null;
    }
    reset() {
      this.heurs = 0;
      this.minute = 0;
      this.seconde = 0;
      this.elem.innerText =
          (this.heurs < 10? "0" : "") + this.heurs + ":" +
          (this.minute < 10? "0" : "") + this.minute + ":" +
          (this.seconde < 10? "0" : "") + this.seconde;
    }
    setDisplay(elem) {
      this.elem = elem;
    }
  }

  let timer = new Timer();
  timer.setDisplay(document.querySelector("#timer"));
  function toggleTimer(e) {
    if (!timer.interval) {
      e.target.innerText = "stop";
      timer.start();
    } else {
      e.target.innerText = "start";
      timer.stop();
    }
  }
</script>
00:00:00

SetTimeout

html JavaScript
View 
<div id="res">...</div>
<button onClick="timeout(event)">start</button>
<script>
  function timeout(e) {
    if (e.target.innerText == "start") {
      document.querySelector("#res").innerText = "Finish in 5 seconds";
      e.target.disabled = true;
      e.target.innerText = "reset";
      setTimeout(() => {
        document.querySelector("#res").innerText = "Finish";
        e.target.disabled = false;
      }, 5000);
    } else {
      e.target.innerText = "start";
      document.querySelector("#res").innerText = "...";
    }
  }
</script>
...

Show / hide HTML element with jQuery

html jQuery
View 
<div style="height:100px;width:100px;background:red;margin:8px" id="block"></div>
<button onclick="sh(event)">hide</button>
<script>
  function sh(e) {
    if ($(e.target).text() == "hide") {
      $("#block").hide();
      $(e.target).text("show");
    } else {
      $("#block").show();
      $(e.target).text("hide");
    }
  };
</script>

Attr with jQuery

html jQuery
View 
<div id="elemAttr" yolo="nop">Element with attribute</div>
<button onclick="addAttribut()">Add attribute</button>
<button onclick="removeAttribut()">Remove attribute</button>

<script>
  function addAttribut() {
    $("#elemAttr").attr("yolo", "yep")
  };
  function removeAttribut() {
    $("#elemAttr").removeAttr("yolo");
  };
</script>
Element with attribute

Zalgo text

js
View 
for(var i=768; i<879; i++){
    console.log(new DOMParser().parseFromString("&#"+i+";", "text/html").documentElement.textContent +"  "+"&#"+i+";");
};

console.log(new DOMParser().parseFromString("heu&#867;&#874;&#862;&#867;&#874;&#862;&#867;&#874;&#862;&#867;&#874;&#862;&#867;&#874;&#862;", "text/html").documentElement.textContent);

//https://stackoverflow.com/questions/6579844/how-does-zalgo-text-work


            

          

        

              

          

        

          
![]+[]

          

            js
                      

          

            

              View
            

                      

        

        

          

            
//a = (![]+[])[+!+[]]
//b = 
//c = 
//d = ([]+[][[]])[+!+[]+!+[]]
//e = (![]+[])[+!+[]+!+[]+!+[]+!+[]]
//f = (![]+[])[+[]]
//g = 
//h = 
//i = ([![]]+[][[]])[+!+[]+[+[]]]
//j = 
//k = 
//l = (![]+[])[!+[]+!+[]]
//m = 
//n = ([!![]]+[][[]])[+!+[]+[+[]]]
//o = 
//p = 
//q =
//r = (!![]+[])[+!+[]]
//s = (![]+[])[+!+[]+!+[]+[]]
//t = (!![]+[])[+[]]
//u = (!![]+[])[!+[]+!+[]]
//v = 
//w = 
//x = 
//y = 
//z = 

//0 = +[]
//1 = +!+[]

//"" = []+[]
//"false" = ![]+[]
//"true" = !![]+[]
//"true"[2] = u

          

          

            

              
            

          

        

              

          

        

          
Add and move element in jQuery

          

            html
                          jQuery
                      

          

            

              View
            

                      

        

        

          

            
<div style="height: 100px;width: 140px;display: inline-block;">
  <div id="targetAddBefore" style="background-color: yellow">.prepend()</div>
  <button id ="addBefore">add "text" before</button>
</div>
<div style="height: 100px;width: 140px;display: inline-block;">
  <div id="targetMoveBefore" style="background-color: yellow">.prependTo()</div>
  <div id="elementMoveBefore">text</div>
  <button id ="moveBefore">move "text" before</button>
</div>
<div style="height: 100px;width: 140px;display: inline-block;">
  <div id="targetAddAfter" style="background-color: yellow">.append()</div>
  <button id ="addAfter">add "text" after</button>
</div>
<div style="height: 100px;width: 140px;display: inline-block;">
  <div id="elementMoveAfter">text</div>
  <div id="targetMoveAfter" style="background-color: yellow">.appendTo()</div>
  <button id ="moveAfter">move "text" after</button>
</div>
<script>
  $("#addBefore").click(function() {
    $("#targetAddBefore").prepend("<div>text</div>");
  });
  $("#moveBefore").click(function(){
    $("#elementMoveBefore").prependTo("#targetMoveBefore");
  });
  $("#addAfter").click(function(){
    $("#targetAddAfter").append("<div>text</div>");
  });
  $("#moveAfter").click(function(){
    $("#elementMoveAfter").appendTo("#targetMoveAfter");
  });
</script>

          

          

            

              

  
.prepend()

  




  
.prependTo()

  
text

  




  
.append()

  




  
text

  
.appendTo()

  



            

          

        

              

          

        

          
Mouse move

          

            html
                          JavaScript
                      

          

            

              View
            

                      

        

        

          

            
Mouve your mouse here
<pre id="output"></pre>
<script>
  let output = document.querySelector("#output");
  output.parentElement.addEventListener("mousemove", function (e) {
    output.innerText = "Compared to page => pageX: " + e.pageX + ", pageY: " + e.pageY + "\n" +
      "Compared to window => clientX: " + e.clientX + ", clientY: " + e.clientY + "\n" +
      "Compared to screen => screenX: " + e.screenX + ", screenY: " + e.screenY + "\n" +
      "Compared to element => offsetX: " + e.offsetX + ", offsetY: " + e.offsetY + "\n" +
      "Compared to page => layerX: " + e.layerX + ", layerY: " + e.layerY + "\n" +
      "Compared to window => x: " + e.x + ", y: " + e.y + "\n" +
      "Compared to before cursor position => movementX: " + e.movementX + ", movementY: " + e.movementY
  });
</script>

          

          

            

              Mouve your mouse here



            

          

        

              

          

        

          
Remove and warp in jQuery

          

            html
                          jQuery
                      

          

            

              View
            

                      

        

        

          

            
<div style="display: inline-block;">
  <div style="background-color: red" id="rm">Element will be remove</div>
  <button onclick="remove()">Remove</button>
</div>
<div style="display: inline-block;">
  <figure id="empty">
    <figcaption>Elements will be remove :</figcaption>
    <div style="background-color: green">Element one</div>
    <div style="background-color: purple">Element two</div>
  </figure>
  <button onclick="removeAll()">Empty content</button>
</div>
<div style="display: inline-block;">
  <dew>Text one</dew><br>
  <dew>Text two</dew><br>
  <button onclick="warp()">warp</button>
  <button onclick="unwrap()">unwrap</button>
</div>
<script>
  function remove() {
    $("#rm").remove();
  }
  function removeAll() {
    $("#empty").empty();
  }
  function warp() {
    $("dew").wrap("<div style='border: 2px solid blue'></div>");
  }
  function unwrap() {
    $("dew").unwrap();
  }
</script>

          

          

            

              

  
Element will be remove

  




  

    
Elements will be remove :

    
Element one

    
Element two

  

  




  Text one

  Text two

  
  



            

          

        

              

          

        

          
DOM events

          

            html
                          JavaScript
                      

          

            

              View
            

                      

        

        

          

            
<!-- https://developer.mozilla.org/en-US/docs/Web/Events -->
<div class="cube" onclick="((e) => $(e.target).toggle(1000))(event)">Toggle square on click</div>
<div class="cube" ondblclick="((e) => $(e.target).toggle(1000))(event)">Toggle square on dblclick</div>
<div class="cube" onmouseenter="((e) => $(e.target).toggle(1000))(event)">Toggle square on mouseenter</div>
<div class="cube" onmouseleave="((e) => $(e.target).toggle(1000))(event)">Toggle square on mouseleave</div>
<div class="cube" onmouseover="((e) => $(e.target).toggle(1000))(event)">Toggle square on mouseover</div>
<div class="cube" onkeyup="((e) => $(e.target).toggle(1000))(event)" contenteditable="true">Toggle square on keyup</div>
<div class="cube" onkeydown="((e) => $(e.target).toggle(1000))(event)" contenteditable="true">Toggle square on keydown</div>

          

          

            

              

Toggle square on click


Toggle square on dblclick


Toggle square on mouseenter


Toggle square on mouseleave


Toggle square on mouseover


Toggle square on keyup


Toggle square on keydown

            

          

        

              

          

        

          
Keyboard input

          

            js
                          JavaScript
                      

          

            

              View
            

                      

        

        

          

            
document.querySelector("#keyInput").addEventListener('keydown', function (e) {
  e.preventDefault();
  document.querySelector("#keyCode").innerText =
    "Key code (Deprecated): " + e.keyCode +
    "\nkey: " + e.key +
    "\ncode: " + e.code +
    "\ntype: " + e.type +
    "\nctrlKey: " + e.ctrlKey +
    "\naltKey: " + e.altKey +
    "\nmetaKey: " + e.metaKey +
    "\nshiftKey: " + e.shiftKey +
    "\nisComposing: " + e.isComposing +
    "\nlocation: " + e.location +
    "\nrepeat: " + e.repeat;

  document.querySelector("#msg").innerText = showMsg(e.keyCode);
});
document.querySelector("#keyInput").addEventListener('keyup', function (e) {
  document.querySelector("#keyCode").innerText =
    "Key code (Deprecated): " + e.keyCode +
    "\nkey: " + e.key +
    "\ncode: " + e.code +
    "\ntype: " + e.type +
    "\nctrlKey: " + e.ctrlKey +
    "\naltKey: " + e.altKey +
    "\nmetaKey: " + e.metaKey +
    "\nshiftKey: " + e.shiftKey +
    "\nisComposing: " + e.isComposing +
    "\nlocation: " + e.location +
    "\nrepeat: " + e.repeat;

  document.querySelector("#msg").innerText = showMsg(e.keyCode);
});

function showMsg(key) {
  switch (key) {
    case 37:
      return "left";
      break;
    case 38:
      return "up";
      break;
    case 39:
      return "right";
      break;
    case 40:
      return "down";
      break;
    default:
      return "An other key";
      break;
  }
}

          

          

            

              






            

          

        

              

          

        

          
Select element in jQuery

          

            html
                          jQuery
                      

          

            

              View
            

                      

        

        

          

            
<style>
  .cube {
    height: 100px;
    width: 100px;
    display: inline-block;
  }

  .sel {
    border: solid 2px blue;
  }
</style>

<div id="cubes">
  <div class="cube" style="background: red;"></div>
  <div class="cube" style="background: yellow;"></div>
  <div class="cube" style="background: red;"></div>
  <div class="cube sel" style="background: green;"></div>
  <div class="cube" style="background: green;"></div>
  <div class="cube" style="background: red;"></div>
  <div class="cube" style="background: yellow;"></div>
</div>
<button onclick="next()">next</button>
<button onclick="nextAll()">nextAll</button>
<button onclick="prev()">prev</button>
<button onclick="prevAll()">prevAll</button>
<button onclick="first()">first</button>
<button onclick="last()">last</button>
<button onclick="parent()">parent</button>
<button onclick="childrenF()">children</button>
<button onclick="filterRed()">filter red</button>
<button onclick="filterGreen()">filter green</button>
<button onclick="filterYellow()">filter yellow</button>
<button onclick="notRed()">not red</button>
<button onclick="notGreen()">not green</button>
<button onclick="notYellow()">not yellow</button>

<script>
  function next() {
    $(".sel").removeClass("sel").next().addClass("sel");
  }

  function nextAll() {
    $(".sel").removeClass("sel").nextAll().addClass("sel");
  }

  function prev() {
    $(".sel").removeClass("sel").prev().addClass("sel");
  }

  function prevAll() {
    $(".sel").removeClass("sel").prevAll().addClass("sel");
  }

  function first() {
    $(".sel").removeClass("sel");
    $("#cubes").children().first().addClass("sel");
  }

  function last() {
    $(".sel").removeClass("sel");
    $("#cubes").children().last().addClass("sel");
  }

  function parent() {
    $(".sel").removeClass("sel").parent().addClass("sel");
  }

  function childrenF() {
    $(".sel").removeClass("sel").children().addClass("sel");
  }

  function filterRed() {
    $(".sel").removeClass("sel");
    $("#cubes").children().filter(function (index) {
      return this.style["background-color"] == "red";
    }).addClass("sel");
  }

  function filterGreen() {
    $(".sel").removeClass("sel");
    $("#cubes").children().filter(function (index) {
      return this.style["background-color"] == "green";
    }).addClass("sel");
  }

  function filterYellow() {
    $(".sel").removeClass("sel");
    $("#cubes").children().filter(function (index) {
      return this.style["background-color"] == "yellow";
    }).addClass("sel");
  }

  function notRed() {
    $(".sel").removeClass("sel");
    $("#cubes").children().not(function (index) {
      return this.style["background-color"] == "red";
    }).addClass("sel");
  }

  function notGreen() {
    $(".sel").removeClass("sel");
    $("#cubes").children().not(function (index) {
      return this.style["background-color"] == "green";
    }).addClass("sel");
  }

  function notYellow() {
    $(".sel").removeClass("sel");
    $("#cubes").children().not(function (index) {
      return this.style["background-color"] == "yellow";
    }).addClass("sel");
  }
</script>

          

          

            

              



  

  

  

  

  

  

  



















            

          

        

              

          

        

          
Signal and close in Node.js

          

            js
                          Node.js
                      

          

            

              View
            

                      

        

        

          

            
// Disale program close
process.stdin.resume()
process.on("exit", () => console.log("oui"));

// Catches ctrl+c signal
process.on("SIGINT", () => process.exit(130));
// Cathes signals
process.on("SIGUSR1", () => process.exit());
process.on("SIGUSR2", () => process.exit());

// Cathes uncaughtException
process.on("uncaughtException", () => process.exit(1));

          

          

            

              
            

          

        

              

          

        

          
install crouton on chromeOS

          

            bash
                          Linux
                      

          

            

              View
            

                      

        

        

          

            
# Download crouton on https://goo.gl/fd3zc 
# Open a shell (Ctrl+Alt+T) and execute this commands :
shell
sudo install -Dt /usr/local/bin -m 755 ~/Downloads/crouton
sudo crouton -t xfce


sudo enter-chroot startxfce4
# or
sudo startxfce4 

          

          

            

              
            

          

        

              

          

        

          
Barcode and camera

          

            html
                          JavaScript
                      

          

            

              View
            

                      

        

        

          

            
<div>
  <div class="camBox">
    <video id="video" autoplay>Video stream not available.</video>
    <button id="takePicture" disabled>
      <i class="material-icons">photo_camera</i>
    </button>
  </div>
  <div class="camBox">
    <img id="photoPreview" alt="Camera capture" />
  </div>
</div>
<script>
  (async () => {
    let video = document.querySelector("#video");
    let photoPreview = document.querySelector("#photoPreview");
    let takePicture = document.querySelector("#takePicture");
    let canvas = document.createElement("canvas");

    video.addEventListener("mouseover", async function() {
      try {
        let cameraStream = await navigator.mediaDevices.getUserMedia({
          video: {
            facingMode: "environment",
          },
          audio: false,
        });
        // on stream start video
        video.srcObject = cameraStream;
        video.play();

        // Enable button
        takePicture.disabled = false;
        takePicture.addEventListener(
          "click",
          function (ev) {
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;

            // Take video picture
            canvas
              .getContext("2d")
              .drawImage(video, 0, 0, canvas.width, canvas.height);

            // Show picture to preview
            photoPreview.setAttribute("src", canvas.toDataURL("image/png"));

            ev.preventDefault();
          },
          false
        );
      } catch (err) {
        console.error("Error: " + err);
      }
    });
  })();
</script>
<style>
  :root {
    --video-height: 256px;
  }

  .camBox {
    position: relative;
    border-radius: 8px;
    background-color: black;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
    width: calc(var(--video-height) * 16 / 9);
    height: var(--video-height);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    margin: 8px;
  }

  .camBox video {
    height: 100%;
    object-fit: fill;
  }

  .camBox img {
    height: 100%;
    object-fit: fill;
  }

  #takePicture {
    position: absolute;
    bottom: 24px;
    right: 24px;
    height: 48px;
    width: 48px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    outline: none;
    background-color: white;
  }

  #takePicture:hover {
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
      0 17px 50px 0 rgba(0, 0, 0, 0.19);
  }

  #takePicture:active {
    transform: translateY(2px);
  }
</style>

          

          

            

              


  

    
    
  

  

    Camera capture
  





            

          

        

              

          

        

          
SEO link for link

          

            txt
                          SEO
                      

          

            

              View
            

                      

        

        

          

            
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy

          

          

            

              
            

          

        

              

          

        

          
Audio panner

          

            html
                          JavaScript
                      

          

            

              View
            

                      

        

        

          

            
<input type="range" id="volumefasdfsffpqwjfoqwifqwef98" min="0" max="2" value="1" list="gain-vals" step="0.01" />
<datalist id="gain-vals">
	<option value="0" label="min">
	<option value="2" label="max">
</datalist>
<label for="volumefasdfsffpqwjfoqwifqwef98">VOL</label>

<input type="range" id="pannerfasdfsffpqwjfoqwifqwef98" list="pan-vals" min="-1" max="1" value="0" step="0.01" />
<datalist id="pan-vals">
	<option value="-1" label="left">
	<option value="1" label="right">
</datalist>
<label for="pannerfasdfsffpqwjfoqwifqwef98">PAN</label>
<audio id="audiofasdfsffpqwjfoqwifqwef98" src="https://dept-info.labri.fr/~thibault/a-audio/C'est%20l'histoire%20d'un%20A%20-%20mp3/03%20Et%20une%20couche%20de%20TTY.mp3"></audio>
<button id="btnfasdfsffpqwjfoqwifqwef98">click</button>

<script type="text/javascript">
document.querySelector('#btnfasdfsffpqwjfoqwifqwef98').addEventListener('click', function() {
	const AudioContext = window.AudioContext || window.webkitAudioContext;
	const audioElement = document.querySelector('#audiofasdfsffpqwjfoqwifqwef98');
	let audioCtx;
  if(!audioCtx) {
		audioCtx = new AudioContext();
		let track = audioCtx.createMediaElementSource(audioElement);
                //let myArrayBuffer = audioCtx.createBuffer(2, audioCtx.sampleRate * 2.0, audioCtx.sampleRate);

                //for (let channel = 0; channel < 2; channel++)
                //  for (let i = 0; i < audioCtx.sampleRate * 2.0; i++) myArrayBuffer.getChannelData(channel)[i] = Math.random() * 2 - 1;

                //let track = audioCtx.createBufferSource();
                //track.buffer = myArrayBuffer;
		// volume
		const gainNode = audioCtx.createGain();

		const volumeControl = document.querySelector('#volumefasdfsffpqwjfoqwifqwef98');
		volumeControl.addEventListener('input', function() {
			gainNode.gain.value = this.value;
		}, false);

		// panning
		const pannerOptions = { pan: 0 };
		const panner = new StereoPannerNode(audioCtx, pannerOptions);

		const pannerControl = document.querySelector('#pannerfasdfsffpqwjfoqwifqwef98');
		pannerControl.addEventListener('input', function() {
			panner.pan.value = this.value;
		}, false);

		// connect our graph
		track.connect(gainNode).connect(panner).connect(audioCtx.destination);
  //track.start();
	}
	audioElement.play();
})
</script>

          

          

            

              

	




	





            

          

        

              

          

        

          
Audio oscillator

          

            js
                          JavaScript
                      

          

            

              View
            

                      

        

        

          

            
document.querySelector('#fdsafsadfhiguasfdhihsafusahdfsafdoqwipfqw5').onclick = function () {
    AudioContext = window.AudioContext || window.webkitAudioContext;
    let audioCtx = new AudioContext();

    const oscillator = audioCtx.createOscillator();
    const gainNode = audioCtx.createGain();


    oscillator.connect(gainNode);
    gainNode.connect(audioCtx.destination);

    oscillator.type = "sine";
    oscillator.frequency.value = 440;
    oscillator.start(0);

    gainNode.gain.value = 0.1;
  }

          

          

            

              

            

          

        

              

          

        

          
side panel

          

            html
                          HTML
                      

          

            

              View
            

                      

        

        

          

            
  <style>
  .page-wrapper {
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

.page-wrapper .page-content {
  display: inline-block;
  overflow-x: hidden;
  width: 100%;
  height: 100%;
  padding: 0px;
}

.page-wrapper .sidePanel-wrapper {
  position: absolute;
}

.sidePanel-wrapper.left,
.sidePanel-wrapper.right {
  width: 260px;
  height: 100%;
  top: 0;
}

.sidePanel-wrapper.top,
.sidePanel-wrapper.bottom {
  width: 100%;
  height: 260px;
  left: 0;
}

.sidePanel-wrapper.left {
  left: -260px;
}

.sidePanel-wrapper.right {
  right: -260px;
}

.sidePanel-wrapper.top {
  top: -260px;
}

.sidePanel-wrapper.bottom {
  bottom: -260px;
}

.page-wrapper.toggled > .sidePanel-wrapper.left {
  left: 0px;
}

.page-wrapper.toggled > .sidePanel-wrapper.right {
  right: 0px;
}

.page-wrapper.toggled > .sidePanel-wrapper.top {
  top: 0px;
}

.page-wrapper.toggled > .sidePanel-wrapper.bottom {
  bottom: 0px;
}

@media screen and (min-width: 768px) {
  .page-wrapper.toggled > .sidePanel-wrapper.left + .page-content {
    padding-left: 260px;
  }

  .page-wrapper.toggled > .sidePanel-wrapper.right + .page-content {
    padding-right: 260px;
  }

  .page-wrapper.toggled > .sidePanel-wrapper.top + .page-content {
    padding-top: 260px;
  }

  .page-wrapper.toggled > .sidePanel-wrapper.bottom + .page-content {
    padding-bottom: 260px;
  }
}

.toggle-sidePanel {
  position: absolute;
  cursor: pointer;
  z-index: 1000;
}

.sidePanel-wrapper.left .toggle-sidePanel {
  border-radius: 0 4px 4px 0;
  border-right: 1px solid #dee2e6 !important;
  border-top: 1px solid #dee2e6 !important;
  border-bottom: 1px solid #dee2e6 !important;
  width: 24px;
  top: 10px;
  right: -24px;
}

.sidePanel-wrapper.right .toggle-sidePanel {
  border-radius: 4px 0  0 4px;
  border-left: 1px solid #dee2e6 !important;
  border-top: 1px solid #dee2e6 !important;
  border-bottom: 1px solid #dee2e6 !important;
  width: 24px;
  top: 10px;
  left: -24px;
}

.sidePanel-wrapper.top .toggle-sidePanel {
  border-radius: 0 0 4px 4px;
  border-left: 1px solid #dee2e6 !important;
  border-right: 1px solid #dee2e6 !important;
  border-top: 1px solid #dee2e6 !important;
  height: 24px;
  left: 10px;
  bottom: -24px;
}

.sidePanel-wrapper.bottom .toggle-sidePanel {
  border-radius: 4px 4px 0 0;
  border-left: 1px solid #dee2e6 !important;
  border-right: 1px solid #dee2e6 !important;
  border-bottom: 1px solid #dee2e6 !important;
  height: 24px;
  left: 10px;
  top: -24px;
}

.sidePanel-wrapper .sidePanel-header {
  padding: 10px 20px;
  align-items: center;
}

.sidePanel-wrapper .sidePanel-header > a,
.sidePanel-wrapper .sidePanel-header > span {
  font-weight: bold;
}

.sidePanel-content {
  overflow-y: auto;
  position: relative;
}

.sidePanel-wrapper.left .sidePanel-content,
.sidePanel-wrapper.right .sidePanel-content {
  height: 100%;
}

.sidePanel-wrapper.top .sidePanel-content,
.sidePanel-wrapper.bottom .sidePanel-content {
  width: 100%;
}

.page-wrapper .sidePanel-wrapper,
.page-wrapper .page-content {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
  </style>

  <div style="height: 500px;background-color: gray;margin: 10px;">
    <div class="page-wrapper toggled">
      <nav class="sidePanel-wrapper left bg-white border-right shadow">
        <!-- Side panel toggler -->
        <div class="btn btn-sm text-body bg-white shadow-sm toggle-sidePanel"
          onclick="this.parentNode.parentNode.classList.toggle('toggled');" title="toggle">
          <i class="fas fa-chevron-left"></i>
        </div>
        <!-- Panel title -->
        <div class="sidePanel-header border-bottom">
          <span class="text-body mr-4">Title</span>
        </div>
        <!-- Panel content -->
        <div class="sidePanel-content" style="word-wrap: break-word;">
          totoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
        </div>
      </nav>
      <main class="page-content" style="word-wrap: break-word;">
        totoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
      </main>
    </div>
  </div>

  <div style="height: 500px;background-color: gray;margin: 10px;">
    <div class="page-wrapper toggled">
      <nav class="sidePanel-wrapper right bg-white border-left shadow">
        <!-- Side panel toggler -->
        <div class="btn btn-sm text-body bg-white shadow-sm toggle-sidePanel"
          onclick="this.parentNode.parentNode.classList.toggle('toggled');" title="toggle">
          <i class="fas fa-chevron-left"></i>
        </div>
        <!-- Panel title -->
        <div class="sidePanel-header border-bottom">
          <span class="text-body mr-4">Title</span>
        </div>
        <!-- Panel content -->
        <div class="sidePanel-content" style="word-wrap: break-word;">
          totoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
        </div>
      </nav>
      <main class="page-content" style="word-wrap: break-word;">
        totoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
      </main>
    </div>
  </div>

  <div style="height: 500px;background-color: gray;margin: 10px;">
    <div class="page-wrapper toggled">
      <nav class="sidePanel-wrapper top bg-white border-bottom shadow">
        <!-- Side panel toggler -->
        <div class="btn btn-sm text-body bg-white shadow-sm toggle-sidePanel"
          onclick="this.parentNode.parentNode.classList.toggle('toggled');" title="toggle">
          <i class="fas fa-chevron-left"></i>
        </div>
        <!-- Panel title -->
        <div class="sidePanel-header border-bottom">
          <span class="text-body mr-4">Title</span>
        </div>
        <!-- Panel content -->
        <div class="sidePanel-content" style="word-wrap: break-word;">
          totoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
        </div>
      </nav>
      <main class="page-content" style="word-wrap: break-word;">
        totoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
      </main>
    </div>
  </div>

  <div style="height: 500px;background-color: gray;margin: 10px;">
    <div class="page-wrapper toggled">
      <nav class="sidePanel-wrapper bottom bg-white border-top shadow">
        <!-- Side panel toggler -->
        <div class="btn btn-sm text-body bg-white shadow-sm toggle-sidePanel"
          onclick="this.parentNode.parentNode.classList.toggle('toggled');" title="toggle">
          <i class="fas fa-chevron-left"></i>
        </div>
        <!-- Panel title -->
        <div class="sidePanel-header border-bottom">
          <span class="text-body mr-4">Title</span>
        </div>
        <!-- Panel content -->
        <div class="sidePanel-content" style="word-wrap: break-word;">
          totoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
        </div>
      </nav>
      <main class="page-content" style="word-wrap: break-word;">
        totoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
      </main>
    </div>
  </div>

          

          

            

               
 
  
 totoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo 
 
 
 
 
  
 totoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo 
 
 
 
 
  
 totoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo 
 
 
 
 
  
 totoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo 
 
 

            

          

        

              

          

        

          
.editorconfig

          

            Properties
                          Tool
                      

          

            

              View
            

                      

        

        

          

            
# Editor configuration, see http://editorconfig.org
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
max_line_length = 120

[*.sh]
end_of_line = lf

[*.java]
indent_size = 4


          

          

            

              
            

          

        

              

          

        

          
Internet ip logger

          

            java
                          Java
                      

          

            

              View
            

                      

        

        

          

            
/*
 * @author charles66820
 *
 * javac InternetIp.java
 * jar -e InternetIp -c -v -f internetIp.jar InternetIp.class
 */
import java.io.*;
import java.net.URL;
import java.util.Date;
import java.text.SimpleDateFormat;

public class InternetIp {
  private static final SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ssZ");

  public static void main(String[] args) {
    BufferedReader in = null;
    String ip = null;
    try {
      // Create ip request
      URL whatismyip = new URL("http://checkip.amazonaws.com");
      in = new BufferedReader(new InputStreamReader(whatismyip.openStream()));
      ip = in.readLine();
    } catch (Exception e) {
      System.out.println("Error on Get ip");
    } finally {
        try {
          if (in != null) in.close();
        } catch (IOException e) {
          System.out.println("Error on close ip request");
        }
    }

    // Print ip in file
    try (PrintWriter outip = new PrintWriter(new FileWriter("internetNodeIp.log", true))) {
      outip.format("[%s] : %s\n", dateFormat.format(new Date()), ip);
    } catch (Exception e) {
      System.out.println("Error on print ip in file");
    }
  }
}

          

          

            

              [2021-04-24 23:47:00+0200] : 12.345.67.89
            

          

        

              

          

        

          
Netwok interfaces list

          

            java
                          Java
                      

          

            

              View
            

                      

        

        

          

            
import java.net.*;
import java.util.*;

public class ListNets {
    public static void main(String[] args) throws SocketException {
        Enumeration<NetworkInterface> nets = NetworkInterface.getNetworkInterfaces();
        for (NetworkInterface netint : Collections.list(nets)) {
            System.out.format(
                "Display name: %s\nName: %s\n",
                netint.getDisplayName(),
                netint.getName()
            );
            Enumeration<InetAddress> inetAddresses = netint.getInetAddresses();
            for (InetAddress inetAddress : Collections.list(inetAddresses))
                System.out.format(" - InetAddress: %s\n", inetAddress);
            System.out.println();
        }
    }
}

          

          

            

              Display name: lo

Name: lo

 - InetAddress: /0:0:0:0:0:0:0:1%lo

 - InetAddress: /127.0.0.1
            

          

        

              

          

        

          
Web countdown

          

            html
                          JavaScript
                      

          

            

              View
            

                      

        

        

          

            
<head>
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    body {
      display: grid;
      place-items: center;
    }
  </style>
</head>
<body>
  <H1>DM in : <span id="datetime"></span></H1>
  <script>
    let dateTimeUTC = new Date("2022-01-01T00:00:00.000Z"); // UTC date time form ISO
    setInterval(
      () => {
        let dateTimeNowUTC = new Date();
        let isPast = dateTimeUTC.getTime() < dateTimeNowUTC.getTime();
        let dateTimeDiffPast = new Date(dateTimeNowUTC - dateTimeUTC);
        let dateTimeDiff = new Date(dateTimeUTC - dateTimeNowUTC);

        let currentDateTimeDiff = isPast ? dateTimeDiffPast : dateTimeDiff;

        let year = 1970 - currentDateTimeDiff.getUTCFullYear();
        let month = currentDateTimeDiff.getUTCMonth();
        let day = 1 - currentDateTimeDiff.getUTCDate();
        let hours = currentDateTimeDiff.getUTCHours();
        let minutes = currentDateTimeDiff.getUTCMinutes();
        let seconds = currentDateTimeDiff.getUTCSeconds();

        let str = Math.abs(year) + "y " + Math.abs(month) + "m " + Math.abs(day) + "d " + Math.abs(hours) + ":" + Math.abs(minutes) + ":" + Math.abs(seconds);
        document.querySelector("#datetime").innerHTML = isPast ? "+" + str : str;
      },
      1000
    );
  </script>
</body>

          

          

            

              
DM in : 

            

          

        

              

          

        

          
Reduced motion

          

            css
                          CSS
                      

          

            

              View
            

                      

        

        

          

            
/* https://dev.to/alvaromontoro/consider-reducing-motions-1a13 */
/* disable all animations and transitions if reduced motion */
@media (prefers-reduced-motion: reduce) { /* no-preference */
  * {
    animation: none !important;
    transition: none !important;
  }
}

          

          

            

              
            

          

        

              

          

        

          
Text outline

          

            css
                          CSS
                      

          

            

              View
            

                      

        

        

          

            
/* https://dev.to/alvaromontoro/color-contrast-text-3l29 */
.text-with-outline-1 {
  color: #fff;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #000;
}

.text-with-outline-2 {
  color: #fff;
  text-shadow:  0px -1px #000,
                1px -1px #000,
                1px  0px #000, 
                1px  1px #000,
                0px  1px #000,
               -1px  1px #000,
               -1px  0px #000,
               -1px -1px #000;
}

          

          

            

              
            

          

        

              

          

        

          
Create circle hole in image with clip-path

          

            js
                          CSS
                      

          

            

              View
            

                      

        

        

          

            
  let precision = 64;
  let radius = 25;
  let c = [...Array(precision)].map((_, i) => {
    let a = -i/(precision-1)*Math.PI*2;
    let x = Math.cos(a)*radius + 50;
    let y = Math.sin(a)*radius + 50;
    return `${x}% ${y}%`
  })

  console.log(`clip-path: polygon(100% 50%, 100% 100%, 0 100%, 0 0, 100% 0, 100% 50%, ${c.join(',')})`);

          

          

            

              
            

          

        

              

          

        

          
Screen capture

          

            html
                          JavaScript
                      

          

            

              View
            

                      

        

        

          

            
<video id="video" height="400" autoplay></video>
<button id="toggle">toggle</button>
<script>
  (async () => {
    let capture = false;
    const videoElem = document.querySelector("#video");

    async function toggleCapture(event) {
      if (capture) {
        videoElem.srcObject.getTracks().forEach((track) => track.stop());
        videoElem.srcObject = null;
        capture = false;
      } else {
        try {
          let captureStream = await navigator.mediaDevices.getDisplayMedia({
            video: {
              cursor: "none",
            },
            audio: true,
          });

          videoElem.srcObject = captureStream;

          // Dump debug
          for (const track of videoElem.srcObject.getVideoTracks()) {
            console.info("Track");
            console.info(track);
            console.info("Track settings:");
            console.info(JSON.stringify(track.getSettings(), null, 2));
            console.info("Track constraints:");
            console.info(JSON.stringify(track.getConstraints(), null, 2));
          }
        } catch (err) {
          console.error("Error: " + err);
        }
        capture = true;
      }
    }
    document
      .querySelector("#toggle")
      .addEventListener("click", toggleCapture, false);
  })();
</script>

          

          

            

              


            

          

        

              

          

        

          
Screen recorde

          

            html
                          JavaScript
                      

          

            

              View
            

                      

        

        

          

            
<video id="video" height="400" autoplay></video>
<button id="toggle">toggle capture</button>
<button id="togglerec">toggle recorde</button>
<script>
  (async () => {
    let capture = false;
    const videoElem = document.querySelector("#video");

    async function toggleCapture(event) {
      if (capture) {
        videoElem.srcObject.getTracks().forEach((track) => track.stop());
        videoElem.srcObject = null;
        capture = false;
      } else {
        try {
          let captureStream = await navigator.mediaDevices.getDisplayMedia({
            video: {
              cursor: "never",
            },
            audio: true,
          });

          videoElem.srcObject = captureStream;

          // Recorde
          let rec = new MediaRecorder(captureStream);
          let fileWritableStream;
          let handleFile;

          async function saveChunk(event) {
            let blob = new Blob([event.data], {
              type: 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"',
            });
            await fileWritableStream.write(blob);
          }

          rec.addEventListener("start", async function (event) {
            rec.addEventListener("dataavailable", saveChunk);
            fileWritableStream = await handleFile.createWritable();
          });

          rec.addEventListener("stop", async function (event) {
            rec.removeEventListener("dataavailable", saveChunk);
            await fileWritableStream.close();
          });

          async function toggleRec(event) {
            if (rec.state == "recording") rec.stop();
            else {
              handleFile = await window.showSaveFilePicker();
              rec.start(1000 /* One seconde */);
            }
          }

          document
            .querySelector("#togglerec")
            .addEventListener("click", toggleRec, false);

          // Dump debug
          for (const track of videoElem.srcObject.getVideoTracks()) {
            console.info("Track");
            console.info(track);
            console.info("Track settings:");
            console.info(JSON.stringify(track.getSettings(), null, 2));
            console.info("Track constraints:");
            console.info(JSON.stringify(track.getConstraints(), null, 2));
          }
        } catch (err) {
          console.error("Error: " + err);
        }
        capture = true;
      }
    }

    document
      .querySelector("#toggle")
      .addEventListener("click", toggleCapture, false);
  })();
</script>

          

          

            

              



            

          

        

              

          

        

          
Reduce

          

            javascript
                          JavaScript
                      

          

            

              View
            

                      

        

        

          

            
array.reduce((buffer, item, index, originalArray) => {/* process */}, bufferInit);

// examples :
[6, 3, 8].reduce((acc, item) => acc + item, 0);

// two following line do the same thing
[6, 3, 8].reduce((buff, item) => (buff.push(Math.sqrt(item)), buff), []);
[6, 3, 8].reduce((buff, item) => {buff.push(Math.sqrt(item)); return buff;}, []);

          

          

            

              
            

          

        

              

          

        

          
list SIMD compile macros

          

            c
                          C / C++
                      

          

            

              View
            

                      

        

        

          

            
#include <stdio.h>

int main(int argc, char const *argv[]) {
#ifdef __MMX__
  printf("MMX ");
#endif

#ifdef __SSE__
  printf("SSE ");
#endif

#ifdef __SSE2__
  printf("SSE2 ");
#endif

#ifdef __SSE3__
  printf("SSE3 ");
#endif

#ifdef __SSSE3__
  printf("SSSE3 ");
#endif

#ifdef __SSE4__
  printf("SSE4 ");
#endif

#ifdef __SSE4_1__
  printf("SSE4.1 ");
#endif

#ifdef __SSE4_2__
  printf("SSE4.2 ");
#endif

#ifdef __AVX__
  printf("AVX ");
#endif

#ifdef __AVX2__
  printf("AVX2 ");
#endif

#ifdef __AVX512F__
  printf("AVX512F ");
#endif

#ifdef __k8__
  printf("k8 ");
#endif

  printf("\n");

  return 0;
}

          

          

            

              
            

          

        

              

          

        

          
Js string manipulation

          

            js
                          JavaScript
                      

          

            

              View
            

                      

        

        

          

            
"test012345".slice(-5); // five last digits return "12345"

"ABC".charCodeAt(0); // return 65 for the first char
"123".split(''); // sting to chars array
String.fromCharCode(65, 66, 67); // return 'ABC'

["1", "4", "5"].every(i => i.match(/\d/i)); // every match

          

          

            

              
            

          

        

              

          

        

          
Audio loopback

          

            js
                          JavaScript
                      

          

            

              View
            

                      

        

        

          

            
(async () => {
  const audioElement = document.body.appendChild(document.createElement("audio"));
  audioElement.setAttribute("autoplay", "autoplay");
  audioElement.srcObject = await navigator.mediaDevices.getUserMedia({
    audio: true,
  });
})();

          

          

            

              


            

          

        

              

          

        

          
Audio input/output

          

            js
                          JavaScript
                      

          

            

              View
            

                      

        

        

          

            
document.querySelector("#btnStart").addEventListener("click", async () => {
  // DOM elements
  const audioElement = document.createElement("audio");
  audioElement.setAttribute("controls", true);
  audioElement.setAttribute("autoplay", "autoplay");
  document.body.appendChild(audioElement);

  // Capture audio
  const inputMediaStream = await navigator.mediaDevices.getUserMedia({
    audio: true,
  });
  const audioContext = new AudioContext();

  // Source
  const audioSourceStream =
    audioContext.createMediaStreamSource(inputMediaStream);
  // const audioSourceElement = audioContext.createMediaElementSource(audioElement);
  // const audioSourceTrack = audioContext.createMediaStreamTrackSource(inputMediaStream.getAudioTracks()[0]);

  // Destination
  const audioDestinationStream =
    audioContext.createMediaStreamDestination();
  const audioDestinationDefault = audioContext.destination;

  // Connect source to destination
  // audioSourceStream.connect(audioDestinationDefault);
  audioSourceStream.connect(audioDestinationStream);

  // Bind audioDestinationStream to audio element
  const outputMediaStream = new MediaStream();
  outputMediaStream.addTrack(
    audioDestinationStream.stream.getAudioTracks()[0]
  );
  audioElement.srcObject = outputMediaStream;

  // draw
  const canvas = document.createElement("canvas");
  document.body.appendChild(canvas);
  const canvasContext = canvas.getContext("2d");

  // following code found here: https://developer.mozilla.org/en-US/docs/Web/API/BaseAudioContext/createAnalyser
  const analyser = audioContext.createAnalyser();
  analyser.minDecibels = -90;
  analyser.maxDecibels = -10;
  analyser.smoothingTimeConstant = 0.85;
  analyser.connect(audioDestinationStream);
  // const bufferLength = analyser.frequencyBinCount;

  const width = canvas.width;
  const height = canvas.height;

  analyser.fftSize = 2048;
  const bufferLength = analyser.fftSize;
  // const dataArray = new Float32Array(bufferLength);
  const dataArray = new Uint8Array(bufferLength);

  canvasContext.clearRect(0, 0, width, height);

  const draw = function () {
    drawVisual = requestAnimationFrame(draw);
    analyser.getByteTimeDomainData(dataArray);

    canvasContext.fillStyle = "rgb(200, 200, 200)";
    canvasContext.clearRect(0, 0, width, height);
    canvasContext.lineWidth = 2;
    canvasContext.strokeStyle = "rgb(0, 0, 0)";
    canvasContext.beginPath();

    const sliceWidth = (width * 1.0) / bufferLength;
    let x = 0;
    for (let i = 0; i < bufferLength; i++) {
      let v = dataArray[i] / 128.0;
      let y = (v * height) / 2;
      if (i === 0) {
        canvasContext.moveTo(x, y);
      } else {
        canvasContext.lineTo(x, y);
      }
      x += sliceWidth;
    }
    canvasContext.lineTo(width, height / 2);
    canvasContext.stroke();
  };

  draw();

  // record
  // const chunks = [];
  // const mediaRecorder = new MediaRecorder(dest.stream);
  // mediaRecorder.start();
  // mediaRecorder.stop();
  // mediaRecorder.addEventListener("dataavailable", e => chunks.push(e.data));
  // mediaRecorder.addEventListener("stop", e => {
  //   const blob = new Blob(chunks, { type: "audio/ogg; codecs=opus" });
  //   document.querySelector("audio").src = URL.createObjectURL(blob);
  // });
});

          

          

            

              



            

          

        

              

          

        

          
CSS color scheme auto

          

            css
                          CSS
                      

          

            

              View
            

                      

        

        

          

            
/* only use default color */
:root {
  color-scheme: normal;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
}

          

          

            

              
            

          

        

              

          

        

          
color-scheme select and save

          

            html
                          CSS
                      

          

            

              View
            

                      

        

        

          

            
<!-- only use default color -->
<style>
  :root {
    color-scheme: normal;
  }

  @media (prefers-color-scheme: light) {
    :root {
      color-scheme: light;
    }
  }

  @media (prefers-color-scheme: dark) {
    :root {
      color-scheme: dark;
    }
  }
</style>
<script>
  window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", event => {
    const newColorScheme = event.matches ? "dark" : "light";
    if (!localStorage.colorScheme || localStorage.colorScheme == "auto") {
      document.querySelector(":root").style.setProperty("color-scheme", newColorScheme);
    }
  });

  function initColorSchemeSelect(colorSchemeSelect) {
    if (!localStorage.colorScheme || localStorage.colorScheme == "auto") {
      colorSchemeSelect.value = "auto";
    } else if (localStorage.colorScheme == "dark" || localStorage.colorScheme == "light") {
      colorSchemeSelect.value = localStorage.colorScheme
    } else {
      colorSchemeSelect.value = "auto";
    }
    colorSchemeSelect.addEventListener("change", event => {
      switch (event.target.value) {
        case "auto":
          if (window.matchMedia) {
            if(window.matchMedia("(prefers-color-scheme: dark)").matches) {
              document.querySelector(":root").style.setProperty("color-scheme", "dark");
            } else {
              document.querySelector(":root").style.setProperty("color-scheme", "light");
            }
          } else {
            document.querySelector(":root").style.setProperty("color-scheme", "normal");
          }
          localStorage.removeItem("colorScheme")
          break;
        default:
          document.querySelector(":root").style.setProperty("color-scheme", event.target.value);
          localStorage.colorScheme = event.target.value;
          return;
      }
    });
  }
</script>

          

          

            

              
            

          

        

              

          

        

          
color-scheme toggle

          

            js
                          CSS
                      

          

            

              View
            

                      

        

        

          

            
function toggleColorScheme() {
  let cs = getComputedStyle(document.querySelector(":root")).getPropertyValue("color-scheme")
  switch (cs) {
    case "light": // light => dark
      document.querySelector(":root").style.setProperty("color-scheme", "dark");
      break;
    case "dark": // dark => light
      document.querySelector(":root").style.setProperty("color-scheme", "light");
      break;
    default: // normal or other
      if (window.matchMedia) {
        if(window.matchMedia("(prefers-color-scheme: dark)").matches) { // normal (probably light) => dark
          document.querySelector(":root").style.setProperty("color-scheme", "dark");
        } else { // light => dark
          document.querySelector(":root").style.setProperty("color-scheme", "dark");
        }
      } else { // default (probably light) => dark
        document.querySelector(":root").style.setProperty("color-scheme", "dark");
      }
  }
}

          

          

            

              
            

          

        

              

          

        

          
findUnicodeFont

          

            py
                          Python
                      

          

            

              View
            

                      

        

        

          

            
#copy form https://superuser.com/questions/876572/how-do-i-find-out-which-font-contains-a-certain-special-character
import unicodedata
import os

fonts = []

for root,dirs,files in os.walk("/usr/share/fonts/"):
    for file in files:
       if file.endswith(".ttf"): fonts.append(os.path.join(root,file))
       if file.endswith(".otf"): fonts.append(os.path.join(root,file))

for root,dirs,files in os.walk("/home/charles/.local/share/fonts/"):
    for file in files:
       if file.endswith(".ttf"): fonts.append(os.path.join(root,file))
       if file.endswith(".otf"): fonts.append(os.path.join(root,file))

from fontTools.ttLib import TTFont

def char_in_font(unicode_char, font):
    for cmap in font['cmap'].tables:
        if cmap.isUnicode():
            if ord(unicode_char) in cmap.cmap:
                return True
    return False

def test(char):
    for fontpath in fonts:
        font = TTFont(fontpath)   # specify the path to the font in question
        if char_in_font(char, font):
            try:
                print(char + " " + unicodedata.name(char) + " in " + fontpath) 
            except ValueError as ve:
                print(char + " in " + fontpath)

test(u"●")
test(u"\u1F63A")
test(u"\u1F408")
test(u"")
test(u"")

          

          

            

              
            

          

        

              

          

        

          
GPIO script to test pins

          

            bash
                          Linux
                      

          

            

              View
            

                      

        

        

          

            
#!/bin/bash

#num_gpio=$1
read -p "Enter GPIO pin number: " num_gpio

isNumber='^[0-9]+$'
if ! [[ $num_gpio =~ $isNUmber ]] ; then
   echo "error: Not a number" >&2
   num_gpio=199
fi

# active one GPIO pin
echo $num_gpio > /sys/class/gpio/export
# set pin to output signal
echo out > /sys/class/gpio/gpio$num_gpio/direction

# do some things
echo Active GPIO pin $num_gpio
echo 1 > /sys/class/gpio/gpio$num_gpio/value
for i in {1..1}; do echo -e "$i seconds pending\033[A"; sleep 1; done; echo

echo Deactive GPIO pin $num_gpio
echo 0 > /sys/class/gpio/gpio$num_gpio/value
for i in {10..1}; do echo -e "$i seconds pending\033[A"; sleep 1; done; echo

echo Active GPIO pin $num_gpio
echo 1 > /sys/class/gpio/gpio$num_gpio/value
for i in {10..1}; do echo -e "$i seconds pending\033[A"; sleep 1; done; echo

# reset
echo 0 > /sys/class/gpio/gpio$num_gpio/value

# desactive
echo $num_gpio > /sys/class/gpio/unexport

          

          

            

              
            

          

        

              

          

        

          
Browser info

          

            html
                          Web
                      

          

            

              View
            

                      

        

        

          

            

          

          

            

              chrome://version
chrome://settings/help
chrome://flags/#enable-quic
chrome://extensions

Informations du Navigateur

    
    
        
  • Nom du navigateur : 
    • 
        
  • Version du navigateur : 
    • 
        
  • Agent utilisateur : 
    • 
    


    
            

          

        

              

          

        

          
C types.h

          

            c
                          C / C++
                      

          

            

              View
            

                      

        

        

          

            
#ifndef CUSTOM_TYPES_H
#define CUSTOM_TYPES_H 1

/* Kernel/Rust like int */

typedef signed char s8;
typedef signed short int s16;
typedef signed int s32;
typedef signed long long int s64;
typedef __int128_t s128;

typedef unsigned char u8;
typedef unsigned short int u16;
typedef unsigned int u32;
typedef unsigned long long int u64;
typedef __uint128_t u128;

/* Custom int */

typedef s8 int8;
typedef s16 int16;
typedef s32 int32;
typedef s64 int64;
typedef s128 int128;

typedef u8 uint8;
typedef u16 uint16;
typedef u32 uint32;
typedef u64 uint64;
typedef u128 uint128;

/* Kernel/Rust like floating point */

#if defined(__HAVE_FLOAT16) && __HAVE_FLOAT16 == 1
typedef __fp16 half;
typedef half fp16;
#else
typedef float fp16;
#endif
typedef float fp32;
typedef double fp64;
#if defined(__HAVE_FLOAT128) && __HAVE_FLOAT128 == 1
typedef __float128 fp128;
#else
typedef double fp128;
#endif

/* Custom floating point */

typedef fp16 float16;
typedef fp32 float32;
typedef fp64 float64;
typedef fp128 float128;

#endif /* CUSTOM_TYPES_H */

          

          

            

              
            

          

        

              

          

        

          
foreach in C

          

            c
                          C / C++
                      

          

            

              View
            

                      

        

        

          

            
#include <stdio.h>

struct user_s {
  char* name;
  int age;
}
typedef struct user_s user_t;

static const user_t users[] = {
  { .name = "toto", .age = 8 },
  { .name = "titi", .age = 14 },
};

#define ARRAY_SIZE(x) (sizeof(x) / sizeof((x)[0]))

#define foreach(obj, objs)                                    \
  typeof(objs[0])* obj = objs;                                \
  for(size_t size = ARRAY_SIZE(objs); size > 0; obj++, size--)

int main() {
  //typeof(users[0])* user1 = users;
  const user_t* user1 = users;
  for(size_t size = ARRAY_SIZE(users); size > 0; user1++, size--) {
    printf("%s à %dans\n", user1->name, user1->age);
  }

  foreach(user2, users) {
    printf("%s à %dans\n", user2->name, user2->age);
  }

  return 0;
}

          

          

            

              
            

          

        

              

          

        

          
Web vibeate

          

            js
                          JavaScript
                      

          

            

              View
            

                      

        

        

          

            
window.navigator.vibrate(120000);

          

          

            

              
            

          

        

              

          

        

          
Bind callback lihandler listener to a class

          

            js
                          JavaScript
                      

          

            

              View
            

                      

        

        

          

            
class Perso {
    #element;
    #name;
    #onClick(event) {
        let currentElement = event.target;
        let persoInstance = this; // the Perso instance
        console.log(currentElement, persoInstance);
    }
    constructor(name, color) {
        this.#name = name;
        this.#element = document.createElement("div");
        this.#element.style.width = "40px";
        this.#element.style.height = "40px";
        this.#element.style.backgroundColor = color;
        this.#element.title = name;
        document.body.appendChild(this.#element);
        this.#element.addEventListener('click', this.#onClick.bind(this));
    }
    get name() {
        return this.#name;
    }
}
const toto = new Perso("Toto", "blue");
const titi = new Perso("Titi", "red");

          

          

            

                

  
            

          

        

              

          

        

          
Fish in Qt

          

            py
                          Python
                      

          

            

              View
            

                      

        

        

          

            
#!/usr/bin/python3
from PyQt5.QtCore import Qt, QPoint
from PyQt5.QtWidgets import QApplication, QWidget
from PyQt5.QtGui import QPainter, QPixmap, QBitmap, QColor

MAX_SIZE = 250

class FishWindow(QWidget):
  def __init__(self):
    super().__init__()
    fishPixmap = self.loadFish("fish.png")

    self.setFixedSize(fishPixmap.size())

    # fishMask = fishPixmap.createMaskFromColor(QColor(0, 0, 0, 0), Qt.MaskOutColor)
    fishMask = fishPixmap.createMaskFromColor(QColor(0, 0, 0, 0), Qt.MaskInColor)
    # fishMask = fishPixmap.createHeuristicMask()
    self.setMask(fishMask)

    self.setWindowFlags(Qt.FramelessWindowHint | Qt.WindowMaximizeButtonHint)
    self.setAttribute(Qt.WA_TranslucentBackground, True)
    self.dragPosition = QPoint(0, 0)
    self.fishPixmap = fishPixmap
    self.windows = list()

  def loadFish(self, fileName):
    fishPixmap = QPixmap("fish.png")
    fishSize = fishPixmap.size()

    if fishSize.height() > fishSize.width():
      height = MAX_SIZE
      width = int(MAX_SIZE * fishSize.width() / fishSize.height())
    else:
      width = MAX_SIZE
      height = int(MAX_SIZE * fishSize.height() / fishSize.width())

    fishPixmap = fishPixmap.scaled(width, height, Qt.KeepAspectRatio)
    return fishPixmap

  def paintEvent(self, event):
    painter = QPainter(self)
    painter.drawPixmap(0, 0, self.fishPixmap)

  def mouseReleaseEvent(self, event):
    if event.button() == Qt.LeftButton:
      event.accept()
      self.newFish()

  def mousePressEvent(self, event):
    if event.button() == Qt.LeftButton:
      # self.dragPosition = event.globalPos() - self.frameGeometry().topLeft()
      self.dragPosition = self.mapFromGlobal(event.globalPos())
      event.accept()

  def mouseMoveEvent(self, event):
    if event.button() == 0:
      self.move(event.globalPos() - self.dragPosition)
      event.accept()
  def newFish(self):
    window = FishWindow()
    window.move(QPoint(500, 500))
    window.show()
    self.windows.append(window)

if __name__ == '__main__':
  app = QApplication([])
  fishWindow = FishWindow()
  fishWindow.show()
  app.exec_()

          

          

            

              
            

          

        

              

          

        

          
Mouse capture

          

            js
                          JavaScript
                      

          

            

              View
            

                      

        

        

          

            
elem.addEventListener("click", function() {
  elem.requestPointerLock();
});

          

          

            

              

Click here