Javascript, HTML, SVG, and generic web development techniques



Entry: jQuery
Date: Mon Mar 15 17:16:27 CET 2010

As a first dive into the world of javascript and jquery, I'm reading
[1].  First conclusion: callbacks and proper lambdas ;)

Question: what is the significance of the '$' character?  Is it just a
function?  It's the jQuery constructor, an alias for the jQuery method.

Moving on to [2].  Passing by [3] to find out about the $ sign. That 
page also mentions 

    Note that CSS stylesheets come before the jQuery 
    file, and the jQuery file comes before your custom script.

So it seems jQuery is mostly about iterating over filtered parts of
Moving on to [2] the document, i.e. document queries.  Makes sense.

Question: what does the `this' object point to in an anonymous
function?  Maybe the object it is pasted into?



[1] http://docs.jquery.com/Tutorials:How_jQuery_Works
[2] http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery
[3] http://www.learningjquery.com/2006/09/introducing-document-ready
[4] http://www.quirksmode.org/js/this.html


Entry: jQuery.each()
Date: Thu Mar 18 15:12:06 CET 2010

From [1]:

    A generic iterator function, which can be used to seamlessly
    iterate over both objects and arrays.  Arrays and array-like
    objects with a length property (such as a function's arguments
    object) are iterated by numeric index, from 0 to length-1.  Other
    objects are iterated via their named properties.

[1] http://api.jquery.com/jQuery.each/


Entry: Rhino (just JavaScript)
Date: Thu Mar 18 15:33:58 CET 2010

java -classpath ~/sw/bin/js.jar  org.mozilla.javascript.tools.shell.Main

// lambda: abstraction and application
js> (function(a){return 1+a;})(1)
2

// objects
js> function Test() { this.foo = 123; }
js> new Test()
[object Object]
js> (new Test()).constructor
js> (new Test()).bar
js> (new Test()).foo
123
js> (new Test()).bar == false
false
js> (new Test()).bar == undefined
true

// It seems that capitalized constructors is just a convention.
js> function foo() { this.bar = 123; }
js> new foo()
[object Object]

// The global object (namespace).
js> this
[object global]
js> (function() {return this;})()
[object global]

// Each object is a separate namespace.
js> function foo() { this.bar = 123; this.foo = function() {return this;}}
js> (new foo()).foo()
[object Object]

// Prototypes: add a .prototype object in the constructor
js> foo.prototype
[object Object]
js> foo.prototype.abc = 1
1
js> (new foo()).abc
1

// Reflection: list properties.  Iteration over an object (associative
// array) returns a collection of strings representing slot names.

js> for (att in new foo()) { print (att); }
bar
foo
abc

// I.e. cfr arrays:
js> for (att in ["1","2","3"]) { print (att); }
0
1
2

// Data definition: JSON
js> var a = {"foo" : 123, "bar" : 345}

// Object (associative array) indexing
js> for (it in a) { print(it,a[it]); }
foo 123
bar 345

// Quotes are optional
js> var a = {foo : 123, bar : 345}


// Applying functions (methods) to objects.  Can use call or apply.

js> obj = new Object()
[object Object]
js> obj.x = 123
123
js> send = function(obj,msg) { return msg.call(obj); }

function (obj, msg) {
    return msg.call(obj);
}

js> send(obj, function() {return this.x;})
123
js> send2 = function(obj,msg) { return msg.apply(obj,[]); }

function (obj, msg) {
    return msg.apply(obj, []);
}

js> send2(obj, function() {return this.x;})
123

Entry: The DOM
Date: Thu Mar 18 17:27:38 CET 2010

In the DOM, the root object is the window.  The window.document
represents the currently viewed document.

How do you get to the clients of a node? In XML there are two
sub-containers of a node: attributes and child elements.  The lowest
level representation in the DOM chains these together using the
following properties:

    .attributes   an array of NamedNodeMap objects
    .childNodes   an array of nodes

Attributes can also be accessed using the .getAttribute() method.

Also see [1].  In general it is simpler to use iterator and query
functions to access parts of the DOM.


[1] http://www.howtocreate.co.uk/tutorials/javascript/dombasics


Entry: jQuery
Date: Fri Mar 19 10:17:47 CET 2010

The following is in the Firebug console.  The prototypical use of
jQuery is to iterate over a collection.

>>> $("a").map(function(indx, el) {return this.getAttribute("href");})
["http://www.sipri.org/"]

The $ here is an alias for the jQuery constructor.  $("a") constructs
a query which abstracts a collection of all <a/> nodes in the
document.  Query objects supports the `each' method which applies each
object in the query to a function.  Also supported is the `map' method
which additionally collects function results in a list.

That particular example is simpler to do as:

>>> $("a").attr("href")
"http://www.sipri.org/"

which returns the attribute for the first element in the selection.

Most of the API seems to be imperative; methods modify the state of
the document.

To set the text of a collection of nodes, use:

>>> $("a").text("SIPRI")
[a www.sipri.org]

The syntax that's used in the string passed to to the $() constructor
has elements of XPath.

[1] http://en.wikipedia.org/wiki/Jquery

Entry: Crash course JavaScript + DOM + jQuery
Date: Fri Mar 19 11:04:26 CET 2010


1. Play with JavaScript independently from the DOM on the console
   using Rhino.

   Download Rhino from here[1].  Unpack + compile.  The product is the
   "js.jar" file.  Invoke using 

      java -classpath ~/sw/bin/js.jar org.mozilla.javascript.tools.shell.Main

   Make sure you understand:

   OBJECT: An object is an associative array (maps string -> object)

   FIELD: Object fields do not need to be declared.  A field fld in
   object obj can be retrieved as:

      obj.fld  

      obj["fld"]

   Both styles can be used to read _and_ assign values.

   FUNCTIONS: functions are objects: they can be assigned to fields
   and passed as arguments to functions

   CONSTRUCTORS: functions serve as constructors: 

      new myFun() 

   assigns a new object to the "this" object used in the function.

   PROTOTYPES: what I said above is wrong.  Objects are initialized
   from a ``prototype object''.  The default prototype object is the
   empty object.

      new myFun()

   assigns a copy of the myFun.prototype object to the "this" object
   used in the function.

   THIS: Refers to the current object = the object the current
   function was invoked on.  If a function is not invoked on an
   object, the "this" object is the global object (containing global
   variables).  In the DOM the global object is window.

   JSON: The JSON syntax is the syntax for initializing JavaScript
   objects. (JavaScript Object Notation).



2. Get to know the Document Object Model (DOM) a bit using Firebug[2].

   The DOM is a representation of everything there is to know about a
   web page and is context, represented as a hierarchy of JavaScript
   objects and functions (i.e. iterators).

   A very useful part in Firebug is the JavaScript console.  This is
   essentially the same as Rhino above, but with extra functionality
   (objects & functions).

   Learn that the DOM is a mess, and that abstractions on top of it
   are necessary.  But, as with all abstractions, it is useful to know
   the low-level substrate on which they are built.

   

3. jQuery[3] essentially provides a way to "walk the DOM", i.e. to query
   structures inside the DOM and iterate over them.


[1] http://www.mozilla.org/rhino/download.html
[2] http://www.joehewitt.com/software/firebug/faq.php
[3] http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery       



Entry: Ajax
Date: Thu Mar 25 13:28:03 CET 2010

In order to make Ajax work in firefox, all the files need to come from
the same domain.  Apparently this doesn't work with file:/// urls.

A quick workaround is to set up a web server using:

    cd <dir>
    python -m SimpleHTTPServer

which makes the directory available on port 8000.

A basic asynchronous request looks like[1]:

  $.ajax({ 
      url: "consumption.json", 
      dataType: "json",
      success: function(data){
          z.json = data;
      }});


This returns an XMLHttpRequest object, which is not very useful.  In
order to get to the data you need to set a callback.  Here we just
store it in a global variable.

For JSON data this wrapper is defined: 

  $.getJSON("consumption.json", function(data) { 
      ...
  }))


What about XML?  Same story.  The data passed to the callback is a DOM
representation of an XML document. 

  $.ajax({ 
      url: "console.xml", 
      dataType: "xml",
      success: function(data){
          z.xml = data;
      }});


[1] http://api.jquery.com/jQuery.getJSON/



Entry: React design principles
Date: Tue Sep  1 18:03:12 CEST 2015

Main questions seems to be: prop or state?

Current take: state is that which the model doesn't need to know
about.  State tracks user's view navigation, e.g. intermediate states
before some action can be submitted to the model.

Before continuing, a syntax is needed for message passing.
Could use the one from Prgramming Erlang:




Entry: PureScript
Date: Wed Sep  2 17:00:24 CEST 2015

As I move into JavaScript land interrupting a Haskell journey, I'm
feeling the PureScript lure...

[1] https://github.com/purescript/purescript/wiki/Differences-from-Haskell


Entry: react context menues
Date: Thu Sep  3 01:10:04 CEST 2015

http://stackoverflow.com/questions/28648292/right-click-menu-using-react-js


Entry: React data upload
Date: Sat Sep  5 20:34:30 CEST 2015

// browsing to get filename
<form><input type="file"/></form> 

// reading data
FileReader.readAsBinaryString
FileReader.readAsArrayBuffer

// then send over websocket

[1] https://fitacular.com/blog/react/2014/06/23/react-file-upload-base64/
[2] https://developer.mozilla.org/en/docs/Web/API/FileReader


Entry: Radium: ditch CSS in React
Date: Mon Sep  7 18:34:51 CEST 2015

CSS: cascade was never a good idea.

http://projects.formidablelabs.com/radium/
https://www.youtube.com/watch?v=rOAK7ZQND_o


Entry: javascript news
Date: Mon Sep  7 18:58:51 CEST 2015

https://fivejs.codeschool.com/
http://javascriptweekly.com/issues
http://nodeweekly.com/issues


Entry: firefox extensions
Date: Sat Jan 16 20:58:22 EST 2016

https://blog.mozilla.org/addons/2014/06/05/how-to-develop-firefox-extension/


Entry: React Native
Date: Sat Feb 27 14:48:42 EST 2016

http://code.hireart.com/2016/02/24/react-native-ios-app/?utm_content=buffere587c&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer


Entry: CPS
Date: Wed Apr  6 19:29:25 EDT 2016

http://www.2ality.com/2012/06/continuation-passing-style.html


Entry: installing purescript
Date: Wed Apr  6 19:31:02 EDT 2016

http://www.purescript.org/learn/getting-started/

apt-get install npm nodejs-legacy

mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
export PATH=~/.npm-global/bin:$PATH

npm install -g purescript
npm install -g pulp bower


Entry: new purescript project
Date: Wed Apr  6 19:49:57 EDT 2016

cd prj
pulp init
pulp build
pulp test


Broken...



> 123
Error found:
in module $PSCI.Support
at  line 3, column 1 - line 4, column 1

  Unknown module Prelude




Entry: WebExtensions Firefox add-ons
Date: Sat Jul  9 13:28:54 EDT 2016

https://developer.mozilla.org/en-US/Add-ons/WebExtensions
https://github.com/mdn/webextensions-examples/tree/master/context-menu-demo


Entry: PureScript
Date: Mon Aug  1 22:43:28 EDT 2016

http://www.lambdacat.com/getting-to-know-purescript-from-elm/


Entry: PureScript again
Date: Wed Sep  7 22:19:51 EDT 2016

Following the explanation on the main site worked for me:
http://www.purescript.org/learn/getting-started/

apt-get install npm nodejs-legacy

tom@tp:~$ cat .npmrc
prefix = ~/.npm-global


Entry: mvc dead
Date: Fri Nov 11 13:06:41 EST 2016

https://medium.freecodecamp.com/is-mvc-dead-for-the-frontend-35b4d1fe39ec?imm_mid=0ea80e&cmp=em-web-na-na-newsltr_20161109#.3jx5i9w3g
http://staltz.com/unidirectional-user-interface-architectures.html


Entry: auth through ssh
Date: Wed Dec 14 22:41:58 EST 2016

https://lobste.rs/s/qsbnez/signing_websites_with_ssh
https://vtllf.org/sshweb.html



Entry: page scripts vs. content scripts
Date: Tue Jan  3 00:40:21 EST 2017

trying to write a youtube greasemonkey script, but can't get at:

            var p = document.getElementById("movie_player");
            var u = p.getVideoUrl();

https://developer.mozilla.org/en-US/Add-ons/SDK/Guides/Content_Scripts/Interacting_with_page_scripts

  "By default, content scripts loaded by add-ons and scripts loaded by
  web pages are insulated from each other."



Entry: CPS vs. react-style
Date: Sun Feb  5 19:46:34 EST 2017

Trying to build a web application in Erlang and Javascript, I find it
useful to use CPS for calls initiated by Erlang.  Can the same be done
in Javascript?  And what would be the difference from a react style
"update the world on reply" approach?

Essentially: should my GUI
  - call into the server and get a reply (xmlrpc)
  - send a single-ended message, and interpret update messages


So how is react different from rest?
In react, actions can flow up.  What does that mean?



Entry: Background vs. content script
Date: Fri Feb 10 17:07:35 EST 2017

http://stackoverflow.com/questions/12971869/background-vs-content-scripts
http://stackoverflow.com/questions/2303147/injecting-js-functions-into-the-page-from-a-greasemonkey-script-on-chrome



Entry: React model, and DIY approximations
Date: Fri Feb 10 17:15:34 EST 2017

Worked with react, find it very slow with a lot of red tape.
Is there a way to just do this kind of stuff server side?

It seems that the problem react solves is to avoid notification
spaghetti.  Something happens, and as a consequence the view changes
completely.  Then React's contribution is to do a full re-render in an
optimal way.




Entry: @ppk talk on web
Date: Fri Feb 10 19:27:22 EST 2017

http://www.holovaty.com/writing/ppk-talk/
via @adrianholovaty

https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f#.5h92lxnny



Entry: Framework bashing
Date: Fri Feb 10 21:15:57 EST 2017

Maybe I can actually learn something here...
- learn DOM and browsers
- keep it simple

https://jack.ofspades.com/developing-small-javascript-components-without-frameworks/
https://mmikowski.github.io/no-frameworks/
https://svelte.technology/blog/frameworks-without-the-framework/



Entry: SPA design
Date: Sat Feb 11 10:44:43 EST 2017

So this is really bugging me.  What I've seen from the web page bits
is that it is very hard to simplify the ideas.

The main thing that keeps coming back is the elimination of circular
dependencies by introducing hierarchy.



Really, what this is about is "relaxation": changing a tiny bit of the
whole has effect on the whole.  Recomputing the whole seems to be the
only sane way to do this, unless all updates are local, in which case
only the local bit can be updated.


So I wonder, is there a way to convert such a circular dependency into
a tree effect directly?  E.g. suppose that a naive propagation would
cause cycles, so define a canonical way to resolve those.  The result
of that is a set of updates.

Maybe the correct paradigm for guis isn't reactive programming, it's
constraint programming.



Entry: Clickable SVG
Date: Tue Feb 14 21:49:13 EST 2017

"It's very easy to do clickable regions in svg itself, just add some
<a> elements around the shapes you want to have clickable."

http://stackoverflow.com/questions/11236085/create-a-map-with-clickable-provinces-states-using-svg-html-css-imagemap


Entry: True rest
Date: Wed Feb 15 11:34:10 EST 2017

Absorbing a lot of this, and also trying to figure out what "local
state" really means.  A good example is a REST website with a dropdown
box.

The options:
- dropdown box + submit button
- submit (refresh) on option change

The former has local state, the latter doesn't.

Is abolishing this kind of local state a good idea or not?

Problem is that the latter needs javascript.  I would like to avoid
javascript in "static" pages.

In this case it seems simpler to generate a list of links instead of
using a dropbox.




Entry: Simple text screen
Date: Wed Feb 15 15:18:05 EST 2017

What I really want is to have a plain and simple text grid that spans
the entire width of the browser.  Something I can "draw on" similar to
curses.




Entry: React vs. the React idea
Date: Tue Feb 21 16:23:25 EST 2017

So the basic premise is:

1. It's too hard to update the structure of the web page
   incrementally, so recompute the whole thing.

2. Given the new structure, compute the diff to limit redraws


While this is a great idea, the diffing doesn't have to happen in the
browser.  Why use virtual dom if it is possible to do the diffing on a
much simpler internal data structure, and translate that into a
sequence of updates.



The important part here is that if it makes sense to go to full tree
recomputation, it might make sense to go to tree diffing for rendering
updates, but it might as well be just fine.

Also in many cases it is possible an even easier to compute the diff
directly.  So what about making this explicit?


Entry: SVG pathelement and animation
Date: Wed Feb 22 17:25:30 EST 2017

https://developer.mozilla.org/en-US/docs/Web/API/SVGPathElement
https://css-tricks.com/video-screencasts/135-three-ways-animate-svg/

EDIT: requestAnimationFrame

Entry: Binary data on websocket
Date: Wed Feb 22 18:56:48 EST 2017

The appropriate two types of frames that a server can send are text
frames and binary frames (5.2). The ws.binaryType allows you to define
in which format you'd like to obtain the binary data.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray


Entry: Storing data in DOM
Date: Thu Feb 23 19:30:23 EST 2017

http://stackoverflow.com/questions/5905994/i-know-its-bad-to-store-data-in-the-dom-but-why



Entry: webassembly
Date: Thu Jun  1 17:28:49 EDT 2017

http://webassembly.org/getting-started/developers-guide/



Entry: CommonJS
Date: Tue Jun 13 13:29:38 EDT 2017

Purescript produces CommonJS.
How to run that in a browser?

So my misconception: node and npm are server-side tools.  Running this
all in the browser is a whole different thing.

I think I need to start this bottom up.

"pulp browserify", so probably use browserify from npm also





Entry: purescript
Date: Tue Jun 13 13:51:58 EDT 2017

pulp browserify --standalone myBundle --to myBundle.js



Entry: Getting started with node
Date: Wed Jun 14 09:15:07 EDT 2017

https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment

Main ideas:
- node can be used to debug javascript library code interactively or with a test suite
- browserify can be used to bundle a CommonJS module structure into a single file

To test code interactively in the node shell, it needs to be wrapped in a module:

http://2ality.com/2011/05/load-source-in-node.html



Entry: expose modules into the global namespace
Date: Fri Jun 16 14:53:01 EDT 2017


browserify main.js --standalone app -o bundle.js

main.js:
 exports.app = require('./app');
app.js:
 exports.start = function() ...

why is there this double wrapping?
 app.app.start()


Ok, so the arg to --standalone is the object that contains all the
exports from the main module. They are not flattened.


Entry: UMD
Date: Fri Jun 16 16:17:44 EDT 2017

http://bob.yexley.net/umd-javascript-that-runs-anywhere/
http://davidbcalhoun.com/2014/what-is-amd-commonjs-and-umd/



Entry: browserify vs webpack
Date: Fri Jun 16 20:08:06 EDT 2017

https://medium.freecodecamp.com/browserify-vs-webpack-b3d7ca08a0a9
https://webpack.github.io/docs/webpack-for-browserify-users.html



Entry: dead code elimination
Date: Fri Jun 16 22:05:08 EDT 2017

https://medium.com/@roman01la/dead-code-elimination-and-tree-shaking-in-javascript-build-systems-fb8512c86edf



Entry: getAttribute
Date: Sat Jun 17 11:05:53 EDT 2017

obj.attr is the same as obj['attr']

but this is different from:

obj.getAttribute('attr')

e.g. for an svg

obj.getAttribute('width') -> 400
obj.width -> SVGLength object

EDIT:
https://stackoverflow.com/questions/29929797/setattribute-doesnt-work-the-way-i-expect-it-to

As I read that, it seems using element.attribute = value is the way to
go.  But e.g. for svg path 'd' element it doesn't work.

I still dont' completely understand this.  What are "nonstandard attributes" ?

EDIT:

I have a <path/> element, where I can assign p['data-xyz'] and
reference it the same way.  However, any 'data-xyz' attribute that is
passed in through the xhtml source can only be accessed by
getAttribute('data-xyz').

from:
https://stackoverflow.com/questions/10280250/getattribute-versus-element-object-properties

getAttribute('a') gets an attribute, while obj.a gets a property of
the DOM object, often normalized from the original HTML attribute
(which is a string).  So they are not the same.

Apparently custom attributes are not synced to the DOM, so always
needs getAttribute.

But then:
https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
data-foo -> el.dataset.foo

Didn't work on the path elemnt.  Maybe only on HTML, not SVG?






Entry: DOM elements as objects
Date: Sat Jun 17 11:14:44 EDT 2017

I like the ReactJS component idea.  Can this be approximated using
actual DOM elements and associated behavior?

As an example, take an SVG that needs to be animated somehow.
The SVG DOM element can be retrieved by:

document.getElementById('my-svg')

To use this as the state of an object, some data would need to be
stored in it.  From browsing the web I learn this is OK apparently,
just a little dirty and old school...

https://stackoverflow.com/questions/427262/can-i-just-make-up-attributes-on-my-html-tags

Bottom line, prefix with "data-" to be HTML5 compliant.

To identify an object, the "id" attribute is fine.

https://www.w3schools.com/tags/att_global_data.asp



Entry: browser right-click contextual menus
Date: Sat Jun 17 19:35:11 EDT 2017

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contextmenu

Only supported in firefox.


Entry: addEventListener
Date: Mon Jun 19 13:46:19 EDT 2017

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events



Entry: this
Date: Mon Jun 19 18:48:08 EDT 2017

a = { foo: function() { return this; } }

a.foo(); -> a

var b = a.foo;
b(); -> global context


It seems that the function is not bound to the object.  It is just
associated to an object at the time of the call.



Entry: SVG is very slow
Date: Mon Jun 19 19:10:26 EDT 2017

Quite ridiculously slow actually.  Maybe give canvas a try instead.



Entry: Setting the "d" attribute
Date: Mon Jun 19 19:43:38 EDT 2017

There is the path.animatedPathSegList which has a representation of
the path.  Maybe best to use this instead of going through the string
ops.

Otoh this is a lot of objects.  Might actually be worse than just
pushing it into the string...

createSVGPathSegLinetoRel(1,100)

https://www.w3.org/TR/SVG/paths.html#InterfaceSVGPathSegList


Entry: this
Date: Mon Jun 19 22:43:34 EDT 2017

https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work



Entry: webgl (See also jsfiddle, codepen)
Date: Wed Jun 21 20:21:20 EDT 2017

https://webglfundamentals.org/webgl/lessons/webgl-animation.html



Entry: CSS specificity
Date: Thu Jun 22 08:19:57 EDT 2017

How to determine which rules are overridden?  In the firefox
stylesheet inspector, overridden rules are crossed out.

I guess, beginner mind:
https://www.w3schools.com/css/

Yeah that's not helpful.

https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

Apart from Floats, the CSS Specificity is one of the most difficult
concepts to grasp in Cascading Stylesheets.

Some notes:
- for rules of equal importance, the last one overrides



Entry: checkbox
Date: Sat Jun 24 18:25:18 EDT 2017

Checkbox "checked" attribute doesn't update when setting innerHTML.

Actually it seems that "checked" needs to be absent.
https://stackoverflow.com/questions/7851868/whats-the-proper-value-for-a-checked-attribute-of-an-html-checkbox


Entry: == vs ===
Date: Tue Jun 27 17:27:00 EDT 2017

https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons




Entry: Sending queries to web browsers
Date: Sun Jul 23 21:36:34 EDT 2017

Background vs. content script.
It's not easy to get inside the content script context.

Background scripts are there for extensions, but what you want is to
get at the page context dom.

One possible way to do this is to inject a websocket into pages by
modifying content in a proxy.
3

https://stackoverflow.com/questions/9515704/insert-code-into-the-page-context-using-a-content-script



Entry: Distributed programming: server or client side?
Date: Thu Aug  3 09:46:39 EDT 2017

It is really not easy to decide what goes server side and what goes
client side.  If the application is designed well, it will be quite
arbitrary.

For hatdgw I use the rule: keep it server-side, unless it is too
inefficient.  We serve only one user, so there are no real performance
issues in the server.

However, for things that are really only about display, it makes sense
to do it on javascript.  E.g.: collapse a view.

https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp


Entry: Button outside of form
Date: Thu Aug  3 10:20:13 EDT 2017

https://stackoverflow.com/questions/7020659/submit-form-using-a-button-outside-the-form-tag

Simplest solution: label outside of form.

However for SPA it might make sense to not use forms at all, but use
individual member updates.



Entry: SVG patterns
Date: Sat Aug  5 18:39:49 EDT 2017

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Patterns


Entry: more SVG
Date: Mon Aug 14 18:30:57 EDT 2017

http://slides.com/sdrasner/svg-can-do-that


Entry: SVG drag events
Date: Tue Aug 15 10:06:59 EDT 2017


onmousedown="mouseDown(evt)"
onmousemove="move(evt)"
onmouseup="endMove(evt)"
onmouseout="endMove(evt)" 



Entry: Cells vs. display=none/block
Date: Wed Aug 16 20:52:19 EDT 2017

Still mutation, but the code is a lot simpler on the Erlang side
because no subtemplates need to be pushed around.


Entry: Resize svg
Date: Thu Aug 17 10:36:25 EDT 2017

https://stackoverflow.com/questions/16265123/resize-svg-when-window-is-resized-in-d3-js
https://css-tricks.com/scale-svg/

it's about viewBox
xMinYMin meet


Entry: div nesting
Date: Thu Aug 17 17:06:16 EDT 2017

I do not understand how this works...
Can't get my SVG to scale properly.
Maybe all need to be 100% to have inner be 100%?



Entry: scope additions
Date: Thu Aug 17 18:05:09 EDT 2017

- set resolution?
- hide menu
- properly float boxes


Entry: Mini react
Date: Fri Aug 18 01:56:02 EDT 2017

Basically this would mean moving the template substitution into
javascript.  

I'd be compiling template code to javascript code.

There's no point in doing this if the jump to React is not made as well.

Basically, I want to compile templates to react code instead of XHTML,
and leave the template substitution in there.



Entry: SVG doesn't work with appendElement
Date: Sun Aug 20 17:37:41 EDT 2017

https://stackoverflow.com/questions/16488884/add-svg-element-to-existing-svg-using-dom

var svg = document.getElementsByTagName('svg')[0]; //Get svg element
var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'path'); //Create a path in SVG's namespace
newElement.setAttribute("d","M 0 0 L 10 10"); //Set path's data
newElement.style.stroke = "#000"; //Set stroke colour
newElement.style.strokeWidth = "5px"; //Set stroke width
svg.appendChild(newElement);



Entry: Better path handling
Date: Sun Aug 20 18:57:42 EDT 2017

Resultion using integers is really bad.  Using API might be simpler
than using float formatting.

SVGPathSegMovetoAbs
SVGPathSegLinetoRel

So how to use this?
The path element has the following property:
animatedPathSegList
how to add to that?

temp0.animatedPathSegList.clear()
NoModificationAllowedError: Modifications are not allowed for this document

p.pathSegList.clear() does work.  above is probably coming from some other form of animation

p.pathSegList.appendItem()

Now, how to create items?

SVGPathElement.createSVGPathSegMovetoAbs()  
https://developer.mozilla.org/en-US/docs/Web/API/SVGPathElement



Entry: DOM vs. framework
Date: Sun Aug 20 19:04:05 EDT 2017

Still thinking it's better to learn the DOM in all its messiness,
because it will long outlive the frameworks that try to abstract over
it.



Entry: React vs. presentation model diffing
Date: Tue Aug 29 03:20:38 EDT 2017

Woke up after looping on something about setting attributes.  Can't
make much sense of it...  This is going to sound a little confused.

This is about full-blown React, vs diffing the presentation model and
mapping diffs to imperative widget updates.

The model diff doesn't work well for deep structural differences.  It
is a hack that works as long as layout doesn't change too much, or if
the changes are easy to express as method calls.  Ether turning things
on and off, pushing new inner layout, or having a little more smarts
on the javascript side to push a component.  React could still be
useful there.

What is cool about React, is the ability to make components without
worrying about how to specify construction imperically.  The method I
came up with is stricly less powerful in that it strongly relies on
being able to push most of the layout initially, and then do simple
tweaks on that tree later on.  It is still server-side, with React
being fully client side.

This is a really interesting and seemingly deep subject.

I do wonder: in a pure react rendering, there is a mapping of an
algebraic data type to layout.  The alternatives (sums in the type --
different constructors) lead to different layout.  You need a react
style if there is any kind of recursion going on, because that needs
to be "flattened out" in the document + node switching.

The essence of the react approach is that construction is done
programmatically.

However in practice it seems that this is not needed beyond simple
things like lists.

Actually lists are a good example of the turning point of complexity.

Bottom line: react is about rendering algebraic data types.  The other
approach does the same initially, but then performs modifications on
the tree, possibly re-rendering subtrees.

In the tree diff, there are 3 operations:
- ins, del, set

The approach I used up to now relies on all structural modifications
being limited to removing and adding (known) elements to a list.  The
type is in essence not recursive -- only at initial rendering time,
but not at update time.

In cases where structure does change, it probably makes sense to push
the constructor code into the javascript, and rebuild nodes
incrementally.

I.e. instead of a constructor, the constructors are encoded
differentially as: ins, del, set.

It's probably possible to build that translation programmatically as
well.  Express the component as a pure function (in a sane language)
and derive the ins, del, set differential constructors.



Entry: Building differential components
Date: Tue Aug 29 04:04:35 EDT 2017

Let's stick to the "nested dictionaries" representation in Erlang,
which seems simple enough because it has only one kind of constructor
(the Erlang map).

When order is imposed on the keys, out comes a structure that is very
similar to the nested structure of xhtml / xml.  Additionally the keys
give a way to identify elements for insertion, deletion.


Essential operations are:
- remove subtree
- insert leaf element in subtree
- create new subtree (done as iterated construction from inserts)

How to specify the constructors such that they are easily translated
to this?

Note that this is a fairly strong limitation: model "list structure"
needs to correspond to XHTML "list structure".  React is much more
general.

But then again, React can probably be modeled by adding a second
compilation step that brings it closer to a DOM-like structure, e.g. a
second presentation model that brings a first transformation into the
xhtml-like representation of keyed nested lists.

So the assumption is: it is straightforward to create constructors for
leaf nodes.  This is the only "real work" left to do.  Everything else
is composed of generic operations.

In the Erlang model, a leaf node is represented by a list or tuple.





Entry: alternatives to float-based kludges
Date: Thu Sep  7 15:02:48 EDT 2017

https://www.sitepoint.com/give-floats-the-flick-in-css-layouts/



Entry: interview questions
Date: Mon Feb 12 12:37:32 CET 2018

Also a great collection of "sample points" to learn from.
https://github.com/yangshun/front-end-interview-handbook

And some remarks about this all being too complicated:
https://news.ycombinator.com/item?id=16346039




Entry: Shorter iteration
Date: Mon Mar 19 12:11:40 EDT 2018

Webpack is not that slow, but what I want is to reload a .js file
without stopping the application.

Even better: include it in an .expect file.



Entry: Delete child given ID of parent and child node
Date: Thu Apr 19 09:07:49 EDT 2018

p=document.getElementById("[table,row_a]")
<tr id="[table,row_a]" data-mixin="cell">

c=document.getElementById("[table,row_a,col_d]")
<td id="[table,row_a,col_d]" data-mixin="cell">

p.removeChild(c)


Entry: CSS library
Date: Thu Apr 19 21:21:07 EDT 2018

mincss.com

https://www.catswhocode.com/blog/lightweight-css-frameworks-2017

I just need to try something.  Likely it really doesn't matter.



Entry: Web design
Date: Fri Apr 20 01:29:43 EDT 2018

REST: a page is a node in an infinite network of individually
addressable pages.  each page is rendered one-shot.

SPA: a page is a cell that is updated according to a viewmodel diff.
the diff is computed in response to a throttled set of events.  the
events cause changes in a controller state, which is reduced to a
viewmodel once all events are processed.  the empty cell corresponds
to the empty viewmodel.



Entry: Eliminate ws.erl / ws.js closures
Date: Fri Apr 20 02:06:57 EDT 2018

Serve a generic page with a symbolic app.start() argument.


Entry: Selection boxes do not go back to default on page reload
Date: Fri Apr 20 14:24:18 EDT 2018

Why is that?



Entry: diff approach
Date: Fri Apr 20 15:51:25 EDT 2018

The only thing you're doing is to refine the granularity.  There is
still the tradeoff between updating inside a structure, or
re-rendering a larger substructure.

It is important to see that this is ARBITRARY.  I.e. an OPTIMIZATION.




Entry: purescript basic structure
Date: Sat Aug  4 08:31:55 EDT 2018

- compiler

- compiled library modules, consist of .json interface file and .js code

- dependency and build tools




Entry: Installing
Date: Sat Aug  4 08:36:59 EDT 2018


To install, it seems simplest to have one copy of npm and the deps per
project.  I don't think there is a way to manage this in nix.

EDIT: There is this:
https://github.com/svanderburg/node2nix


I need some approach that's a bit reproducible.  Using nix doesn't
seem to work for me at this point.  Trying debian now.

apt-get install npm
npm -g install purescript pupl bower


npm WARN engine purescript@0.12.0: wanted: {"node":">=8.10.0","npm":">=5.6.0"} (current: {"node":"4.8.2","npm":"1.4.21"})

This shit sucks.
Do I really want to mess with it?



Install it locally in a project.


EDIT: see git/purescript_test

The bare project contains enough to serve as a template for a
make-based build-tree install.




Entry: widgets
Date: Fri Nov  9 08:19:34 EST 2018

After playing with html for a long time, I still don't find I have a
good sense of creating decent layout.  How to tackle this problem?

One thing that seems to work is to go grid-based, and to resort more
to SVG if precise layout is needed.

What about using SVG for everything?

With CSS grid that might not be necessary.  Moving to pixel-perfect
design is what's needed.  Fonts might help there too.



Entry: time to learn this shit
Date: Tue Dec  4 19:34:05 EST 2018

- book on CSS
- things like youtube download, send to kodi
- wasm
- purescript
- sync: tie all browsers into erlang


Entry: Set image data
Date: Wed Dec 19 12:51:23 EST 2018

https://stackoverflow.com/questions/13416800/how-to-generate-an-image-from-imagedata-in-javascript

img.src = "data:image/gif;base64,iVBORw0KGg..."

The post mentions imagedata.

http://www.websiteoptimization.com/speed/tweak/inline-images/

I already have a way to deliver binary data over websocket.  Can this
just be dumped without encoding to base64?

https://www.w3schools.com/tags/canvas_putimagedata.asp

Or just do this ArrayBuffer to base64 conversion in the browser?

Create a jpg image from ArrayBuffer data:
https://gist.github.com/candycode/f18ae1767b2b0aba568e

var arrayBufferView = new Uint8Array( this.response );
var blob = new Blob( [ arrayBufferView ], { type: "image/jpeg" } );
var urlCreator = window.URL || window.webkitURL;
var imageUrl = urlCreator.createObjectURL( blob );
var img = document.querySelector( "#photo" );
img.src = imageUrl;




Entry: Performance
Date: Wed Dec 19 20:39:40 EST 2018

The previous approach works, but it seems to create quite large
browser resident size.  Some collection is going on but over time it
leaks.

Maybe use a canvas instead?

https://stackoverflow.com/questions/9913765/rapidly-updating-image-with-data-uri-causes-caching-memory-leak

It will still need the url converter..

Anyways, one thing to do is to turn off the stream when not visible:

https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API



EDIT: It seems to no longer leak with the release call.


Entry: example of good ui code, apparently
Date: Thu Dec 20 19:13:15 EST 2018

https://news.ycombinator.com/item?id=18729401


Entry: erl_tools widget: ordered list
Date: Fri Dec 21 11:26:53 EST 2018

Essentially:
- order is necessary as a display property
- names are necessary to index

How to solve both problems at the same time.


The simplest is just to re-generate the entire list.  Why am I not
considering that as an option?

EDIT: It might be actually impossible to regenerate due to lack of
context at the point where the "add" command is generated.  So it
should look like:

- add before first
- add after last
- add at intermediate point following some protocol

Can the latter be avoided?




Entry: youtube url
Date: Fri Dec 21 20:57:39 EST 2018

https://r4---sn-vgqs7nez.googlevideo.com/videoplayback
?pl=18
&requiressl=yes
&fvip=1&gcr=us
&hcs=yes
&expire=1545450460
&txp=7301222
&sparams=dur%2Cei%2Cgcr%2Chcs%2Cid%2Cinitcwndbps%2Cip%2Cipbits%2Citag%2Clmt%2Cmime%2Cmm%2Cmn%2Cms%2Cmv%2Cpl%2Cratebypass%2Crequiressl%2Cshardbypass%2Csource%2Cexpire
&id=o-AHsXMZXIftCD-EVzL6ewQZ5tWRHpsh5ip9S_0UY-YBWN
&initcwndbps=1981250
&ip=24.176.2.205
&ei=e18dXPrdN4O4D6Kes5gD
&shardbypass=yes
&dur=8028.183
&mv=m
&mt=1545428720
&ms=au%2Crdu
&mn=sn-vgqs7nez%2Csn-vgqs7nez
&source=youtube
&mm=31%2C29
&c=WEB
&ratebypass=yes
&signature=0D294F2CCBC6D69B4011544F40FD649E1A9B1306.5E01F07F58E87F6D441414F7A1FC5AEB45D2DA0D
&lmt=1545352007845780
&itag=22
&key=yt6&mime=video%2Fmp4
&ipbits=0

The vid is:
https://www.youtube.com/watch?v=cS1KWv0das8

And doesn't appear.


Regarding erl_ducktape kodi module: it seems to make more sense to
snarf the call that has the original youtube link, and associate that
to what's playing.  It doesn't seem to be possible to use a raw file
link from one to send to another.



Entry: WebExtensions
Date: Sat Dec 22 10:53:04 EST 2018

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext

I don't think I want the node dependency.
How to tell firefox to reload the extension?

about:debugging

How to permanently install the extension?

https://stackoverflow.com/questions/47363481/install-a-personal-firefox-web-extension-permanently

Two ways:
- developer edition (nightly) with about:config xpinstall.signatures.required = false
- let mozilla sign it as unlisted

Still, xpi needs to be built:
web-ext build

EDIT: That builds a .zip file, so what is an .xpi file?

Jesus this stuff sucks.
Can I use something else?  Greasemonkey?

What I want to do is to run in page context anyway.



Entry: Create some flow
Date: Thu Jan  3 21:02:22 CET 2019

html, css -> auto-update
html -> ehtml
ehtml -> auto-update



Entry: CSS book
Date: Thu Jan  3 21:17:41 CET 2019


CSS: The Definitive Guide: Visual Presentation for the Web 4th Edition
Eric A. Meyer, Estelle Weyl


Notes:

- html has strict hierarchy between block and inline elements, but CSS
  can be used to attach any kind of display property.

- this is useful for attaching display styles to plain XML documents.

- div is block, span is inline



Entry: shortcut
Date: Fri Jan  4 12:12:26 CET 2019

I clearly do not have time to dig into this deeply.  I get most of
what I need, except for positioning.  I.e. I want something like grid
or table layout.

So do some explicit grid layout first, e.g. for thermostat?

https://css-tricks.com/snippets/css/complete-guide-grid/

EDIT: All looks straightforward: define a grid col/row dims (px,% or
auto), and place elements inside a grid span.

Do I need a lot more than this?

<html>
  <body>
    <div style="display: grid; grid-template-columns: 50% 50%; grid-template-rows: 50px 50px; ">
      <div style="grid-column-start: 1; grid-column-end: 1">
        A
      </div>
      <div style="grid-column-start: 2; grid-column-end: 2; grid-row-start: 2; grid-row-end: 2">
        B
      </div>
    </div>
  </body>
</html>

How to have separate CSS for mobile?



Entry: example pages
Date: Sun Feb 10 23:34:22 EST 2019

https://jeremy.codes/blog/make-it-boring/
https://news.ycombinator.com/item?id=19240742 -> css


https://www.sitepoint.com/power-em-units-css/



Entry: CSS
Date: Mon Feb 25 08:12:30 EST 2019

Time to go for it.  Let's use this post as the place to come back to.

- everything must be styled.  you cannot rely on defaults

- render based on width of the screen, and a global notion of resolution.

- width can be handled this way:

view-source:https://news.ycombinator.com/news.css

<meta name="viewport" content="width=device-width, initial-scale=1"/>

@media only screen and (min-width : 600px) and (max-width : 689px) {
  .comment { max-width: 540px; overflow: auto }
  pre { max-width: 400px; }
}

- and relative scaling is done using 'em' units, which are relative
  to font-size.

- people advice against writing raw CSS, and to use a generator.  so
  let's start with raw CSS, and construct a way to generate it.

- when using grids, use a couple of cases based on width.

- keep it simple and use only two name spaces: the main style of the
  site + specific classes for each widgets.  then for anything that
  doesn't fit .<class>.<el> use a specific class, e.g. instead of
  .camera.img use .camera_img, but group it in the same section of the
  style file.




Entry: HTML to PDF?
Date: Wed May 15 20:49:25 EDT 2019

I found a tool for this.  I can't locate the notes..
It was webkit based.

https://wkhtmltopdf.org/



Entry: Entirely SVG?
Date: Wed May 29 09:45:26 EDT 2019

I wonder what it would look like to make a page that is entirely SVG,
and be done with all this CSS bullshit.




Entry: layout example
Date: Mon Nov 11 17:16:27 EST 2019

https://tyrrrz.me/blog/monadic-parser-combinators

https://getkiss.org/blog/20191004a

https://sagegerard.com/racket-powered.html

zooming in makes this switch between pc and mobile mode by removing the borders:
https://debian-administration.org/article/316/An_introduction_to_bash_completion_part_1

SVG:
https://wattenberger.com/guide/scaling-svg

simplify:
https://jeffhuang.com/designed_to_last/


Entry: revisit flat design
Date: Thu Nov 21 17:49:03 EST 2019

Thermostat page: I want something really simple: a couple of squares
on a page.  Display temp of each room.

Design-wise: get rid of the "viewmodel" incremental approach?  It
seems overkill.  It seems that if the page is simple, complete updates
are going to be ok.


Requirements:
- look ok on cell phone and web page
- do this first with the video page?



Entry: viewmodels
Date: Thu Nov 21 18:23:11 EST 2019

Are a pain.  There has to be a transformation that makes this much
easier to deal with.

The problem in the end comes from updating multiple inputs, e.g. two
sliders, where one needs to be updated to reflect the change.




Entry: 8 HTML tags you need to be using (and 5 to avoid)
Date: Fri Jan 10 09:28:57 CET 2020

https://www.creativebloq.com/advice/html-tags



Entry: emscripten wasm C draw to canvas
Date: Sat Apr  4 16:21:28 EDT 2020

https://tutorials.technology/tutorials/54-Webassembly-tutorial-using-emscripten-hello-world.html
https://compile.fi/canvas-filled-three-ways-js-webassembly-and-webgl/