hanlof.github.io/index.html at master · hanlof/hanlof.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
@keyframes dropdown { 0% { top: 0px; } 100% { top: 100px; } }
@keyframes mymove { 0% { right: 0px; } 50% { right: 100px } 100% { right: 0px } }
@keyframes flash { 0% { text-shadow: 0px 0px 0px #000 } 50% { text-shadow: 0px 0px 5px #FF8 } 100% { text-shadow: 0px 0px 0px #000 } }
@keyframes flash2 { 0% { text-shadow: 1px 1px 0 #000 } 100% { text-shadow: 1px 1px 0 #FFF } }
@keyframes warning { 0% { color: #F00; } 50% { color: #800; } 100% { color: #F00; } }
@keyframes spin { 0% {transform:rotate(0deg)}
                  25% {transform:rotate(90deg)}
                  50% {transform:rotate(180deg)}
                  75% {transform:rotate(270deg)}
                  100% {transform:rotate(360deg)} }
@keyframes translate { 0% {transform:translate(0px, 0px)} 100% {transform:translate(70px, 100px)} }
.outline { text-shadow: -1px -1px 0 #0F0; }
</style>
</head>

<body bgcolor="black" onkeydown="keyPressed();" text="white" onload="onLoadCallback();">
<div id="container" style="position: relative; margin-right: 10%; margin-top: 4em; max-width: 40em; margin-left: 10%; align: center; font-family: monospace; ">
<pre id="mytext" style="position: relative; font-size: 120%;">
Hi, Coder!

Programming a.k.a. coding is a craft. If you are a coder then you are a craftsman.

Coding is not and will never be a theoretical science.

As with each and every craft knowledge is beneficial but this
does not make the art of computer programming a theoretical
practice any more than plumbing is a theoretical practice.

We need to remember this.

We need to reclaim our craft from the world of academia
and we need to reclaim our craft from the world of big business.

</pre>

<!--
<pre>
Hi coder.

Do you believe that mastering computer
programming is about understanding
class inheritance, templates, patterns,
the latest and greatest new technology
and frameworks?!
Good!
This site is here to offer you new perspectives!
We hope that you have an open mind.
</pre>

<pre>
It may sound really obvious but it's worth
reiterating that that computer programming is
about the code.
Now, we want to state something that may
or may not sound as obvious:
 A large portion of the text that make up most
 computer programs does not actually contain code
 in the sense that they produce any machine
 instructions worth mentioning.
Consider class definitions as an example.
They really don't say anything about program flow
or the actual work being done by your program.
They merely help to structure your snippets
of code that actually does some work.
When the human mind tries to understand your
program they are mostly noice. Given the benefit
of the doubt they are merely just harmless noice
but seing how they are being used all too often
they are no less than obstructing, obscuring and
hiding the real code.

Think about this.

If you want to strive for mastery then really
think about this!

Now shift your focus to the wisdom that speaks
about the importance of always having a good
foundation.

The foundation in the craft of getting a computer
to do what you want is
* Manipulating memory (variables)
* Jumping to certain locations in your
  program given certain conditions (ifs, loops,
  calling functions, returning from functions)
and
* Communicating with parts of the computer that is
  outside of the processor and the memory (screen,
  keyboard, mouse, network adapter, storage
  devices)

It is not
* (A/O)bstructing your code with class hierarchies
* Trying to squeeze every aspect of your program
  into "human understandable" objects
* Using fancy language-specific tricks that makes
  you feel clever

This is not for everyone. Many of you will already
have been offended by these statements.

We hope that you still have an open mind...
</pre>
-->
<div>
	<!-- play with keys! :-)
        This will not be for everyone. Coders (prople in general) tend to have an ego that prevents us from
        cvanging viewpoints and especially admitying that our ideas were not the best.

        We will not call class definitions code. Code is the text that produces the machine instructions that
        controls the behaviour of your program. Not the meta-information that defines the "architecture"

        Do not be so quick to produce a class as soon as you think of a concept that your program needs.
        This is the great fallacy of modern computer program design. The problems with objects/classes are many
        and outlined in detail elsewhere. The problem is that academia had not taught you another way to tackle
        programming. It's not your fault!
        Imagine if you strip away all none-code from your code. Your program just might get so small and so simple
        that it becomes apparent you never needed it in the first place.

        Use abstraction but use it wisely! Global abstraction level: ALARMINGLY HIGH!!!

        Why is the ego so invested in code that we write?!? Requires pondering...

        Don't be so quick to use generic principles. Use discernment. Use common sense. Think for yourself! This
        applies to many things.

	A few key points.

	NAMESPACES
	Honestly, do you think that namespaces are helping or hindering you in your daily work?

	The whole idea of doing something "just in case it's needed" is not good practice.
	In fact it is very harmful.
	Please consider just how many different things you could add "just in case it's needed"
	[ insert example ] and then honestly look at why you chose the particular one that you did.
	Doing something "just in case it's needed later" is not something you would apply to everyday life.
	If you go to shop groceries you will not rent a trailer "just in case you're gonna need it".
	If you build a house you're not going to

        CODING METOD
        IMPLEMENTATION FIRST! DONT SPLIT WORK THAT IS CONNECTED.

        IMPLICIT FUNCTINALITY IS GENERALLY HARMFUL
        Explicit behavior is always easier to understand. LINKS TO "feeling smart".
-->

</div>

<button onclick="click1();">X</button>

<script>
function findRandomWord(s, minlen)
{
  start = -1;
  var alts = [];
  for (i = 0; i < s.length; i++) {
    var ok = "\n\t\ ,.".indexOf(s[i]) == -1;
    if (ok && start == -1) {
      start = i;
      continue;
    }
    if (!ok && start > -1) {
      if ((i - start) >= minlen) {
        alts.push([start, i]);
      }
      start = -1;
    }
  }
  var r = Math.floor(Math.random() * (alts.length));
  return alts[r];
}

function reInsertElem(parentElem, textPos)
{
  var s = parentElem.innerHTML.substr(0, textPos) + this.innerText + parentElem.innerHTML.substr(textPos + this.innerText.length);
  parentElem.innerHTML = s;
  anchor = this.parentElement;
  this.remove();
  anchor.remove();
}

var freeElementCounter = 1;
var effects = []

function click1() {
  var mytext = document.getElementById("mytext");
  var originalText = mytext.innerHTML;
  wordpos = findRandomWord(originalText, 5);

  aName = "anchorElement" + freeElementCounter;
  eName = "freeElement" + freeElementCounter;
  freeElementCounter++;
  var s = originalText.substr(0, wordpos[0]) + "<span id=" + aName + "><span id=" + eName + ">"
    + originalText.substr(wordpos[0], wordpos[1] - wordpos[0]) + "</span></span>" + mytext.innerHTML.substr(wordpos[1]);

  mytext.innerHTML = s;

  var anchorElement = document.getElementById(aName);
  var ofsX = anchorElement.offsetLeft + anchorElement.parentNode.offsetLeft;
  var ofsY = anchorElement.offsetTop + anchorElement.parentNode.offsetTop;
  mytext.innerHTML = originalText.substr(0, wordpos[0]) + (" ".repeat(wordpos[1] - wordpos[0])) + originalText.substr(wordpos[1]);

  anchorElement.style.fontSize = mytext.style.fontSize;
  anchorElement.style.position = "absolute"
  anchorElement.style.left = ofsX + "px"
  anchorElement.style.top = ofsY + "px"
  anchorElement.style.zIndex = "4";
  mytext.insertAdjacentElement("afterend", anchorElement);

  var fE = document.getElementById(eName);
  fE.style.fontSize = "100%";
  fE.style.position = "relative";
  fE.style.backgroundColor = "rgba(0,0,0,0)";
  fE.style.backgroundRepeat = "repeat";
  fE.style.zIndex = "5";
  fE.style.textShadow = "0px 0px 2px black";
  fE.addEventListener("animationend", reInsertElem.bind(fE, mytext, wordpos[0]) );
  var effect = Math.floor(Math.random() * 4);
  switch (effect) {
    case 0:
      //fE.style.animation = "dropdown 1s";
      break;
    case 1:
      fE.style.animation = "flash 2s";
      break;
    case 2:
      anchorElement.style.animation = "spin 0.5s";
      break;
    case 3:
      anchorElement.style.animation = "translate 1s";
      break;
  }
}

function startAnimation()
{
	click1();
	timeout = 20000;
	setTimeout(startAnimation, timeout);
}

function onLoadCallback()
{
	timeout = 5000;
	setTimeout(startAnimation, timeout);
}

function keyPressed()
{
	var event = window.event ? window.event : e;
	console.log("keypress" + event + " " + event.keyCode);
	// left up right down
	// 37 38 39 40
}
</script>
</body></html>