Lets create a series of fields:

{
  container.add(new Field("name", "text"));
  container.add(new Field("surname", "text"));
  container.add(new Field("something", "text"));
}

But wait we can just collect all the actuall info and then have the data so the code 'is not repeating':

fields = [
  { title: "name", type: "text" },
  { title: "surname", type: "text" },
  { title: "something", type: "text" },
];

But wait we can use code so the data 'is not repeating':

fields = [
  ...[ "name", "surname", "something" ]
       .map(i => ({ title: i , type: "text" }))
];

But wait we can use data so the code 'is not repeating':

fields = [
  { titles: [ "name", "surname", "something" ], type: "text" },
  { titles: [ "birth", "death" ], type: "date" },
].flatMap(magic);

But if you really thing about it, and ignore any "non-programmers", who are those guys anyway, the first one is what actually what happens, and by definition has no limitations because it's actually the thing itself, like C. And then you add some sugar and you are also modern:

{
  container.add(
    field.text("name"),
    field.text("surname"),
    field.text("something"),
    field.date("birth"),
    field.date("death").optional,
  )
}

done_

Lets create a thing to replace the very simple selector calls for id and classes.

First lets have simple selector for both the id and single class.

return document.getElementById(name) || 
    [...document.getElementsByClassName(name)]

Here we also return a single value when you pass an id and an array (expanding the default HTMLCollection) when a class is passed.

Now, if we want the make the whole thing more elegant like this:

elements.footer // == document.querySelector('#footer')
elements.button // == document.querySelectorAll('.button') 

We can use the a proxy handler to catch the selector like text that we defined above and return the elements.

const elements = new Proxy({}, {
    get(target, name) {
        return document.getElementById(name) || 
        	[...document.getElementsByClassName(name)];
    }
})

Where every time a property of elements must be deference the name of the property will end up in the get method in the name argument. 

_done

Every single time you have a input text field and submit-like button next to it, at some point, you would like to bind the same action of the submit button to the press of the enter key.

It's trivial, but also it's simply better to just copy-paste it. So here its is:

function onenter(ele, f) {
	ele.addEventListener('keydown', function (e) {
		if (e.keyCode === 13) { f(e); e.preventDefault(); }
	})
}

And also while we are here, instead of using the-not-be-named lib, just use these:

function q(x) { return document.querySelector(x); }
function qa(x) { return [...document.querySelectorAll(x)]; }
function range(x) { return Array.from({length: x}, (v, i) => i); }

For more just go here.

done_

So as you write a simple a html file with one or two resources, lets say one css and one js file, and you then deploy it (= copy paste) to a sever, and then you make some changes (= fix a bug), and then you redeploy (= copy paste, overwrite popup, press yes), and then nothing changes.

The browser, like always, remembers the old 'main.js' from before and then you pres Ctrl+F5. But your tester in the other side, has no clue what a Ctrl is. So you have to do something.

The first thing is to add a simple '?1' at the end of 'main.js' and every other resource, the browser thinks it may be a different file and deletes the cached version.

So now lets make a script to automate the replacement of the '?1' with '?2':

sed 's/"\(.*\)?.*"/"\1?2"||/' -i index.html

But we may want the browser to actually keep some cached files, the files that have not changed. Only if, instead of '?2', we could generate a number that only changes if the actual file changes and also does not repeat it self.

Hash functions? Checksums? Yes.

Lets use 'md5sum' to freak out the people who don't know. A single sed will not make it, lets write a sed to generate multiple seds and pipe it into a sh.

First we find checksums:

find -regex '.*\(js\|css\)$' -exec md5sum {} \+

Then we pipe that to our first sed:

sed 's/\(.*\)  \(.*\)/ ... \2 ... \1 ... /'

where in the place '...' we reconstruct version of our original sed (gets very unreadable). And finally we pipe it to a sh to actually do the substitution.

The whole thing if placed in Makefile would look like this:

index.html: *.css *.js
    find *.css *.js -exec md5sum {} \+ | \
        sed 's/\(.*\)  \(.*\)/sed \"s|\\"\2?[^\\"]*|\\"\2?\1|\" -i index.html/' | sh

_done

As a follow up of the "Bash: Easy help print", lets do the same thing. So I will just copy the whole text and replace what needs replacing...

Ok, lets create a single line of python that will handle the -h option and print something.

First, what to print? I usually add some comments on the start of the file, so lets print that. Example script:

#!/bin/env python3
#
#  This is the doc of the script
#

the line that we will add

code of script

Lets go step by step. We need to print the file it self:

h = open(args[0], 'r').read()
print(h)

Skip the first line (lets skip the read):

print(h[h.index('\n')+1:])	

Go until you find the first empty line:

print(h[h.index('\n')+1:h.index('\n\n')]

Remove the # fro the start of the line:

.replace('#','')

Finally, we check if the -h is the first argument, print the thing and exit:

if '-h' in args: h = open(args[0], 'r').read(); print(h[h.index('\n')+1:h.index('\n\n')].replace('#','')); exit()

done_

 So we have the requestAnimationFrame, you pass a function and it called after a very specific while (irrelevant to the following).

Now lets see the basic structure:

function loop() {
    update()
    requestAnimationFrame(loop)
}
loop()

Ok now lets wrap the function and call it without calling it by name:

(function loop() {
    update()
    requestAnimationFrame(loop)
})()

Is there any way to remove the name of function and still pass it? There is a magical object called arguments which appears out of nothing every time a function is executed. And the member that we need is arguments.callee which is self reference to the function being executed. So we get rid of the name:

(function () {
    update()
    requestAnimationFrame(arguments.callee)
})()

And of course to maximize the coolness we put in a single line:

(function() { update(); requestAnimationFrame(arguments.callee) })()

Ok, this very cool, but is it worth it? Let's analyze what this code succeeds to do:

1. Confuses the next reader of the code.
2. Confuses also the 2nd reader.
3. Confuses also the 3rd reader.
...
N. Confuses also the N-th reader.

So you have to choose what is cooler: confusing no people or confusing up to infinite people? Comment below, like and subscribe.

done_

The classic way to have a drop-down list in html is the select tag.

However there are two main problems/inconvenient. The select tag will only allow to select one item and you cannot type for a not included option or just to filter the list options. Also sometimes just have all the input fields under the same tag name <input> is just niter.

An other way is the <datalist>, that for some reason I learned about it lately (sad).

The classic example:

<input list="hashes">
<datalist id="hashes">
  <option value="sha1">
  <option value="sha256">
  <option value="sha512">
</datalist>

done_ 

Need to just plot a file with numbers? Stop using matl@b or exc€l.

All we need is a couple lines of Python code:

import matplotlib.pyplot as p

p.plot(values)
p.show()

And for the values (if you have the number with new-line separating them) with either a file as an argument of just the stdin couple more lines:

import sys

stream = sys.stdin
if len(sys.argv) > 1:
    stream = open(sys.argv[1], 'r')

values = [float(line) for line in stream]

done_

Ok, lets create a single line of bash that will handle the -h option and print something.

First, what to print? I usually add some comments on the start of the file, so lets print that. Example script:

#!/bin/bash
#
#  This is the doc of the script
#

the line that we will add

code of script

Lets go step by step. We need to print the file it self:

cat "$0"

Skip the first line (lets switch to sed):

sed -n '2,$ p' "$0"

Go until you find the first empty line:

sed -n '2,/^$/ p' "$0"

Remove the # fro the start of the line:

sed '2,/^$/ s/#// p' "$0"

Finally, we check if the -h is the first argument, print the thing and exit:

[ "$1" = '-h' ] && sed -n '2,/^$/ s/#// p' "$0" && exit

done_

public boolean validPlace(BuildingType type, Location location) {

    for (int ix = 0; ix < type.w; ix++) {
        for (int iy = 0; iy < type.h; iy++) {
            
            if (/* check if overlapping */) {
                return false;
            } else if (/* check if road missing */) {
                return false;
            }
        }
    }
    return true;
}

public enum PlacementValidity {
    Ok,
    Overlapping,
    RoadMissing;

    public boolean ok() {
        return this == Ok;
    }
}

public PlacementValidity validPlace(BuildingType type, Location location) {

    for (int ix = 0; ix < type.w; ix++) {
        for (int iy = 0; iy < type.h; iy++) {
                
            if (/* check if overlapping */) {
                return PlacementValidity.Overlapping;
            } else if (/* check if road missing */) {
                return PlacementValidity.RoadMissing;
            }
        }
    }
    return PlacementValidity.Ok;
}

if (validPlace(/* ... */).ok()) {

int send(cost char* text) {

grep '^\w.* {$' | sed 's/ {/;/'

%.h: %.c
    cat $< | grep '^\w.* {$$' | sed 's/ {/;/' > $@

...
} else {
    // TODO print the --help text
}
...

xxd -i help.txt

unsigned char help[] = {
  0x63, 0x61, 0x74, 0x69, 0x6d, 0x61, 0x67, 0x65, 0x3a, 0x20, 0x75, 0x6e,
  0x6b, 0x6e, 0x6f, 0x77, 0x6e, 0x20, 0x6f, 0x70, 0x74, 0x69, 0x6f, 0x6e,
  0x3a, 0x20, 0x25, 0x63, 0x0a, 0x0a, 0x55, 0x73, 0x61, 0x67, 0x65, 0x3a,
...

help.c:
    xxd -i help > help.c

...
} else {
    #include "help.c"
    printf(help);
}
...

gcc -O3 main.c -o program_name_here

catimage:
    gcc -O3 -lm main.c -o catimage

echo main.c | entr make

stb_image.h:
    wget https://raw.githubusercontent.com/nothings/stb/master/stb_image.h

catimage: stb_image.h
    gcc -O3 -lm main.c -o catimage

image.o: stb_image.h
    gcc -O3 -c image.c

stb_image.h:
    wget https://raw.githubusercontent.com/nothings/stb/master/stb_image.h

// image.c

#define STB_IMAGE_IMPLEMENTATION
#include "stb_image.h"

unsigned char* read_image(FILE* file, ...) {
    return call_to_the_lib(...) 
}

// main.c

// #include "image.c"
unsigned char* read_image(FILE*, ...);

catimage: image.o
    gcc -O3 -lm image.o main.c -o catimage

public class Time implements Serializable {

    private long duration;
    private long start;

    // crazy things

}

    private void writeObject(java.io.ObjectOutputStream out) throws ... {
        Map map = new HashMap<>();

        map.put("duration", duration);
        map.put("start", start);
        out.writeObject(map);
    }

    private void readObject(java.io.ObjectInputStream in) throws ... {
        Map map = (java.util.Map) in.readObject();

        duration = (long) map.get("duration");
        start = (long) map.get("start");
    }

    public static final long serialVersionUID = 1L;

    private TimeUnit unit;  // v.2

    private void writeObject(java.io.ObjectOutputStream out) throws ... {
        Map map = new HashMap<>();

        map.put("duration", duration);
        map.put("start", start);
        map.put("unit", unit);
        out.writeObject(map);
    }

    private void readObject(java.io.ObjectInputStream in) throws ... {
        Map map = (Map) in.readObject();

        duration = (long) map.get("duration");
        start = (long) map.get("start");
        if (map.containsKey("unit")) {
            unit = (TimeUnit) map.get("unit");
        } else {
            // TODO unit
        }
    }

    unit = TimeUnit.Milliseconds

    android.R.string.yes

    <!-- Preference framework strings. -->
    <string name="yes">OK</string>

    <string name="yes">OK</string>

public class Player {
    public final String name;
    private Team team;
    ....
    public boolean friendly(Player other) {
        return team.has(other);
    }
}

    private Optional<Team> team;

    return team.isPresent() && team.get().has(other)

    return team.map(i -> i.has(other)).orElse(false);

    return team.filter(i -> i.has(other)).isPresent();

    return team.orElse(Team.EMPTY).has(other);

    return team != null && team.has(other);

.... <span data-value="simple"></span> ....

<script>

var data = {
    simple: gen_simple(),
    ....
}

for (var i of document.querySelectorAll('[data-value]')) {
    i.innerHTML = data[i.getAttribute('data-value')];
}

<script>

.... <script>document.write(gen_simple())</script> ....

....
<script>
for (var i of document.querySelectorAll('script')) i.parentNode.removeChild(i);
</script>

public class SuperIterator<T> implements Iterator<T>, Iterable<T> {

@Override
public Iterator<Character> iterator() {
    return this;
}

 public void setVisible(boolean value) { ...

 public enum Visibility { Visible, Gone }

 public void setVisible(Visibility value) { ...

 setVisible(Visibility.Visible)

 setVisible(value ? Visibility.Visible : Visibility.Gone)

 public void setVisible(boolean value) {
     setVisible(value ? Visibility.Visible : Visibility.Gone)
 }

 public void setVisible(Visibility value) { ...

 public void show() {
     setVisible(Visibility.Visible)
 }

 show()
 setVisible(true)
 setVisible(Visibility.Visible)

 float dx = x1 - x2;
 float dy = y1 - y2;
 return std::hypot(dx, dy);

 float dx = x1 - x2;
 float dy = y1 - y2;
 return std::sqrt(dx*dx + dy*dy);

 float dx = x1 - x2;
 float dy = y1 - y2;
 return dx*dx + dy*dy;

 return (x1 - x2)*(x1 - x2) + (y1 - y2)*(y1 - y2);

Site *maanoo = new (std::nothrow) Site("maanoo.com");

Desktop.getDesktop().browse(new URL("http://maanoo.com").toURI());

var canvas = document.getElementById("canvas");
var c = canvas.getContext("2d");

c.fillRect
c.fillText
c.strokeRect
c.strokeText

c.fillCircle
c.strokeCircle

CanvasRenderingContext2D.prototype.fillCircle = function(x, y, r) {
  this.beginPath();
  this.arc(x, y, r, 0, 2 * Math.PI);
  this.fill();
};

CanvasRenderingContext2D.prototype.strokeCircle = function(x, y, r) {
  this.beginPath();
  this.arc(x, y, r, 0, 2 * Math.PI);
  this.stroke();
};

<body onload="load()">
  <canvas id="canvas_back"></canvas>
  ...
</body>

#canvas_back {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: -1;
}

var c, w, h;

function load() {
  var canvas = document.getElementById("canvas_back");
  c = canvas.getContext("2d");

  window.addEventListener('resize', resize, false);
  resize();
}

function resize() {
  w = canvas.width = window.innerWidth;
  h = canvas.height = window.innerHeight;
  draw();
}

function draw() {
  // use c, w and h to draw the canvas
  ...
  requestAnimationFrame(draw);
}

private static final String NAME = "...";
public static SharedPreferences getPreferences(Activity a) {
  return a.getSharedPreferences(NAME , Context.MODE_PRIVATE);
}

public static void save(Activity a) {
  SharedPreferences.Editor sp = getPreferences(a).edit();

  sp.putString("name1", value1);
  sp.putInt("name2", value2);

  sp.commit();
}

public static void load(Activity a) {
  SharedPreferences sp = getPreferences(a);

  value1 = sp.getString("name1", default1);
  value2 = sp.getInt("name2", default2);
}

getPreferences(Context.MODE_PRIVATE)

localStorage["name"] = value;

value = localStorage["name"];

localStorage["name"] = JSON.stringify(object);

object = JSON.parse(localStorage["name"]);

$(".item")

document.querySelectorAll(".item")

function q(query) {
  return document.querySelectorAll(query);
}

q(".item")

<?php
  $path = "./counter.txt";
  $count = intval(file_get_contents($path));
  if(isset($_GET["add"])) {
    $count++;
    file_put_contents($path, $count);
  }
  echo $count;
?>

*{
  transition: all 0.7s ease-in-out;
}

• Text example
• Image example

value = value % 360

value = (value - min) % (max - min) + min

value = ((value % 360) + 360) % 360

value = ((value - min) % (max - min) + max - min) % (max - min) + min

len = max - min
value = ((value - min) % len + len) % len + min