DEV Community: Dirk Levinus Nicolaas

Many roads lead to Rome

Dirk Levinus Nicolaas — Sat, 02 Mar 2019 16:26:03 +0000

Become a programming, besides curiosity, also must have intelligence/skills outsmart (if it fails in a certain way, must try in other ways and so on)

The use of a simple editor will be more useful in the process of learning javascript programming, because we are required to explore the entire flow of programs that we make without any automatic correction. If I am asked to recommend, I recommend as I currently use (Notepad++).

Finding references is very necessary for someone who wants to be a programmer, as for the basic references we have to learn that I can recommend are MDN (https://developer.mozilla.org/), W3School (https://www.w3schools.com/) and Stackoverflow (https://stackoverflow.com/) . We don't need to learn everything because if that's what we do, we can go crazy alone. We simply search for what we need. Every piece of information we have to document properly for offline reference.

Okay for beginners, let's try:

The challenge is to fill a piece of html in elements that are in HTML with a piece of javascript.
For example we want to put < div >Hello< /div > anywhere in the html, or call the js file or css file to place it in our html.

<head>
  <link href="css/cvd.css" rel="stylesheet" />
  <link href="css/mn.css" rel="stylesheet" />
  <script src="js/cmn.js"></script>
  <script src="js/cvs.js"></script>
  <script src="js/mn.js"></script>
</head>
<body>
  <div id='test'>
    <div>Hello</div>
  </div>  
</body>

<script>
  function include(htmlcontent, toEl){
    //because of the .createRange() factor, then htmlcontent in the form of an array
    //used include(['contentHTM', ...], 'html' || 'body' || head /* default = 'head' */)
    toEl = toEl||"head";
    var range = document.createRange();
    var docElement = (toEl == "html"||toEl == "head"||toEl == "body")? docElement = document.getElementsByTagName(toEl)[0] : docElement = toEl
    /*      
    if(htmlcontent == null){
      alert(new TypeError('The HtmlContent must be filled in'))
    }
    if (htmlcontent.length == 1 ){
      docElement.appendChild(range.createContextualFragment(htmlcontent[0]));
    }
    if (htmlcontent.length >1 ){
      docElement.appendChild(range.createContextualFragment(htmlcontent));
    }*/
    /*simplified to be*/
    switch (true){
       case htmlcontent == null : alert(new TypeError('The HtmlContent must be filled in'));break;
       case htmlcontent.length == 1 : docElement.appendChild(range.createContextualFragment(htmlcontent[0]));break;
       case htmlcontent.length >1 :docElement.appendChild(range.createContextualFragment(htmlcontent));;break
    }
  };
  /* Examples of its use*/
  //window.onload = (function(){
  //or
  //(function(){
  //or

    /* Examples of calling js or css files */
    var cvsCss = "css/cvd.css",
        mnCss  = "css/mn.css",
        cmJs  = "js/cmn.js",
        cvsJs = "js/cvs.js",
        mnJs = "js/mn.js",
        stySht = "stylesheet";
    var tpl_css = function(cont){return `<link href=${cont} rel=${stySht} \/>`} 
    var tpl_scr = function(cont){return `<script src=${cont}><\/script>`} 
    include([
      tpl_css(cvsCss),
      tpl_css(mnCss),
      tpl_scr(cmJs),
      tpl_scr(cvsJs),
      tpl_scr(mnJs)
    ],"head");
    // or
    //],"html");
    //],"body");


    /*Example of filling html in element*/
    include(['<div id=\'test\'></div>'],'body');
    include(['<div>Hello</div>'],document.getElementById('test'));
  //})();
  //or
  //})();
  //or none

</script>

further development to be more flexible for users, namely appendChild can be selected as appendChid or insertBefore.

That is one illustration, that only with pure javascript, can we create a versatile function.

Conclusion.

Being a programmer, we must have curiosity.
We must have the intelligence to outsmart, because there is the term "Many roads lead to Rome".

Mathjax can be edited like mathquill, is it possible?

Dirk Levinus Nicolaas — Sat, 02 Mar 2019 07:47:34 +0000

For those who are still learning and investigating the greatness of html and javascript today, it's best to multiply learning the original syntax, it will be more productive but the file size is not large..

The development of HTML / javascript technology is so fast, something that was once impossible, can now be possible.
Without a javascript program, Mathjax can be edited directly like Mathquill, to refine the editing it can be tricked with a simple program from JavaScript.

Roughly all html pages can be edited with a new html syntax, but we should take the important elements.

Examples for all htm pages can be edited:

<body contenteditable='true'>
Equation*:

\begin{equation*}
E = mc^2
\end{equation*}

<hr>
Brackets:

\[E = mc^2\]

Brackets tagged:

\[E = mc^2\tag{x}\]

</body>

examples for elements:

<div contenteditable='true'>\[E = mc^2\tag{x}\] </div>
<span contenteditable='true'>\[E = mc^2\tag{x}\] </span>

with a piece of javascript:

<span id='mj'> 
\begin {equation}
E = mc ^ 2
\end {equation}
</span>
<script>
document.getElementById ('mj'). ondblclick = function () {return document.getElementById ('mj'). setAttribute ('contenteditable', 'true')};
   document.getElementById ('mj'). onclick = function () {return document.getElementById ('mj'). setAttribute ('contenteditable', 'false')};
</script>

conclusion.

The conclusion is that there is no conclusion because this is still a new thing for me.

I myself am still trying and trying to outsmart tricks according to my reasoning abilities, because there is no reference (Mathjax can be edited) that discusses this (???).

Learn about javascript templates

Dirk Levinus Nicolaas — Thu, 28 Feb 2019 20:09:59 +0000

Modern JavaScript has provided templating, meaning javascript programming does not currently need to use library handelbars or mustcache, because modern Javascript has provided it with a combination of `` and ${}, I cannot explain this but is still curious.

This templates model really doesn't need to be made a library but can be used directly.
Let's experiment with the templates created by the library compared to direct use.

 <script>     
//templatingjs.js
var Template = function Template (template, Obj, Func) {
        return Template.transform (template, Obj, Func)
      }

      Template.convert = function convert (template, Functions) {
        return ExecTemplateFunc (template, Functions)
      }

      Template.transform = function transform (template, Obj, Functions) {
        if (typeof Obj === 'function') {
          Functions = Obj
          Obj = false
        }
        if (typeof Functions === 'function') {
          Template.convert (template, function (err, func) {
            if (err) return Functions (err)
            try {
                func (Obj)
            }
            catch (err) {
              Functions (err)
              return
            }
            Functions (null, func (Obj));

          })
          return
        }
        return ExecTemplateFunc (template) (Obj)
      }

      var ExecTemplate = function ExecTemplate (template) {
        if (typeof template! == 'string') {
          throw new TypeError ('ExecTemplate: expect `template` to be a string')
        }

        return function obj2func (Objs) {
          if (! (Objs! = null && typeof Objs === 'object' && Array.isArray (Objs) === false)) {
            throw new TypeError ('ExecTemplate: expect `Objs' to be an object')
          }

          var keys = []
          var vals = []

          for (var key in Objs) {
            keys.push (key)
            vals.push (Objs [key])
          }
          return new Function (keys, 'return `' + template + '`') .apply (Objs, vals)
        }
      }

      var ExecTemplateFunc = function ExecTemplateFunc (template, Func) {
        if (typeof Func === 'function') {
          try {
              ExecTemplate (template)
          }
          catch (err) {
            Func (err)
            return
          }
          Func (null, ExecTemplate (template));

          return
        }
        return ExecTemplate (template)
      }
    </script>

  <div id='test'></div>
    <script>
      //function
      var UCaseFirstWord = function UCaseFirstWord(val) {
        var tmp = val.split(" ");
        var res="";
        for(i=0;i<tmp.length;i++)
          res += tmp[i].charAt(0).toUpperCase() + tmp[i].slice(1);
        return res
      };
      var rand = function rand(x){return (Math.random()*x)};
      var randLU = function randLU(low, up){ return Math.random() * (up - low) + low}
      //object
      var A = {
        num : 25,
        learn: {
          about: 'javascript programming,'
        },
        stupid: 'the more I did not understand.',
        ucfw: UCaseFirstWord,
        me:'Dirk Nicolaas',
        rand: rand,
        randLU: randLU
      }
      //template
      var sentenceFunc = '1. I learned ${ucfw(learn.about)} but the more I wanted to know, ${stupid} <br> ${me} <br> ${rand(num).toFixed(4)}<br>  ${randLU(20,80)}';

      //
      var sentenc1 = Template(sentenceFunc, A)
      console.log(sentenc1)
      document.write(sentenc1+'<br>')

      Template(sentenceFunc, A, function (err, sentenc2) {
        if (err) return console.error(err)
        console.log(sentenc2)
        document.write(sentenc2+'<br>')
      })
      /////////////////////////////
      //
      var ThreeJS = `https://threejs.org/build/three.js`;
      var sty = `display:inline`;
      var id = `experimen`;

      sentence = `2. I learned ${A.ucfw(A.learn.about)} but the more I wanted to know, ${A.stupid} <br> ${A.me}<br> ${A.rand(A.num).toFixed(4)}<br>  ${A.randLU(20,80)}`

      //HTML 
      var y = `
        <section>
          <div id=${id} style=${sty}>${sentence}<br></div>
        </section>
      `;
       document.getElementById("test").innerHTML = y;

        //Javascript loader
       document.write(`
         <script src=${ThreeJS}><\/script>
       `);

    </script>

*Due to the syntax of a template conflict conflict with yaml, the above program uses ~~~ yaml

At first glance this article is not useful at all for professional developers, but it is very useful to add insight to those who are still learning.

Conclusion

Learning javascript programming should be pure javascript, avoid using libraries or frameworks.
Using the Library or Framework is like we are still in middle school or high school, meaning that we accept what the textbook offers, without needing to know where a proposition or formula is obtained in a text book, what is important is to use it.
For programs that are not too large, you should immediately use the builtin syntax, no need to make small functions and be collected in one library.