Ogbotemi - Portfolio - Cloudflare Page

Front End Engineer, Nodejs Developer, UI/UX Designer

O

G

botemiungbamila

^_^, For web devs

Phiz

There probably isn't much to see in a face that could be drawn in less than 20 seconds:0_0

The Case Of A Functional App

A Minimalist HTML Visual Reference Generator For SVG Files Such As The Ones InFONT AWESOME

Both individual svg files and svg sprites are supported

For fontawesome zip files, svg sprites are located in thespritesfolder.

Otherwise, activate this switchif you wish to make a sprite from multiple, individual svg files.

Processing files0 of 0

<size>

A Surmise of Both Content Generation and Design for the App

Prototyping its UI/UX

Adding Flows to the UI

The pseudo codes below explain the algorithm...

The core of the algorithm uses the dynamic rgx object below. The result of

FileList[i++].text().then(text=>{
  arr = text.split(rgx.tag(<input>.value||'symbol'))
})

is an array that gets looped over via

requestAnimationFrame((id, el)=>{
  (el = arr.shift())?el.replace(rgx[attr](<input>.value)||rgx['all attributes'], attr=>/**/):cancelAnimationFrame(id)
})

let rgx = {
  'all attributes': /[^,>]+/,
  attr: _=>new RegExp(`\\s${_}\\s*=\\s*("|')[^,("|')]+("|')`),
  tag:  _=>new RegExp(`<${_}`)
}

"A Thousand Words" In Images

Vanilla HTML? No Frameworks

With the explosion in the popularity and use of web development frameworks such as React, it has become an industry default to use these "frameworks" for large projects. However, novel bugs require novel solutions and slapping on a feature that is foreign to the core of the framework of choice will only lead to more added features masked as updates with, of course, backwards incompatibilities with codes written in earlier versions.

A software development approach with few ties to added layers of complexities - frameworks, offers the "free rein" that an experienced developer seeks; this website uses the TailwindCSSframework sparingly for rapid prototyping only. The problem of increase in markup due to the atomic CSS approach is solved by fetching both the markup and/or its contents using AJAX

The much used CSS class on this site - tooltip, has all its declarations written by "hand" because custom designs require custom styles. Any CSS framework hoping to augument such custom styling to its existing codebase may as well become a CSS library instead, the only catch being that they are uncommon and needless with good reason.

The following is a side by side comparison of the performance of using a template engine, Handlebars in this case and a discovered alternative in Node.js

npm -v && node -v: 9.5.1 && v16.15.1

Template Engine - Handlebars
show code

settings.hbs

<div class="scroller">
    <section class="card settings"> 
      <form class="settings-form" action="/set" method="POST">
          <h1>Connection to server</h1>
          <div class="warning">
            <p>You browser doesn't support the fetch API, so this won't work. Try Chrome or Firefox.</p>
         </div>
         {{#each connectionTypes}}
            <div>
               <label class="material-radio">
                  <input type="radio" name="connectionType" value="{{value}}" {{#if checked}}checked{{/if}}>
                  <span class="material-radio-btn"></span>
                  <span class="material-radio-text">{{title}}</span>
               </label>
            </div>
         {{/each}}
      </form> 
   </section> 
   <section class="card settings tester"> 
      <form class="test-form">
         <h1>Test results</h1>
         <p>During the course you'll be able to come here and run tests to verify everything
        is working as expected.</p> 
         <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
         <input class="mdl-textfield__input test-id" type="text" id="testId" name="testId" /> 
         <label class="mdl-textfield__label" for="testId">Test ID</label>
       </div> 
       <div class="feedback-text"></div>
       <div class="meme-container"><div class="meme-img-container"></div></div> 
    </form>   </section>
</div>
<script> 
   var config = { 
      appPort: {{appPort}}
   };
</script>

Running the program via anindex.jsfile as follows

let Handlebars = require('handlebars'),
    settings  = Handlebars
    .compile(fs
    .readFileSync('./templates/settings.hbs',
  'utf-8'));
settingsTemplate({/**/});

Performance

console.time('alternate'),
  settings({/**/}),
console.timeEnd('alternate')

gave execution times between ~35x to ~50x longer such as 19.016ms, 19.559ms, 19.855ms

Discoverd Alternative
show code

settings.js

module.exports = function(arg) {
  return `<div class="scroller">
    <section class="card settings">
        <form class="settings-form" action="/set" method="POST">
        <h1>Connection to server</h1>
        <div class="warning">
            <p>You browser doesn't support the fetch API, so this won't work. Try Chrome or Firefox.</p>
        </div>` + arg.connectionTypes.map(conType=>`<div>
            <label class="material-radio">
                <input type="radio" name="connectionType" value="${conType.value}" ${conType.checked && 'checked' || ''}>
                <span class="material-radio-btn"></span>
                <span class="material-radio-text">${conType.title}</span>
            </label>
            </div>`).join('\n') + `
        </form>
    </section>
    <section class="card settings tester">
        <form class="test-form">
        <h1>Test results</h1>
        <p>
            During the course you'll be able to come here and run tests to verify everything
            is working as expected.
        </p>
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <input class="mdl-textfield__input test-id" type="text" id="testId" name="testId" />
            <label class="mdl-textfield__label" for="testId">Test ID</label>
        </div>
        <div class="feedback-text"></div>
        <div class="meme-container"><div class="meme-img-container"></div></div>
        </form>
    </section>
    </div>
    <script>
    var config = {
        appPort: ${arg.appPort}
    };
</script>`
}

//require'd as a module or package
let settings = require('./templates/settings');
settings({/**/})

Performance

console.time('alternate'), settings({/**/}),
console.timeEnd('alternate')

gave execution times lesser than

1
2

of1ms

such as 0.556ms, 0.368ms, 0.402ms

Serving HTML templates in Nodejs

While the use of templating engines in Node.js is a best practice, it is not cast in stone and faster alternatives as shown above should be sought

Building HTML on the fly in Node.js with room for customizations is possible with the code below. While it can't possibly consider all possibilities without contributions from the open source community, it is a start

npm -v && node -v: 9.5.1 && v16.15.1

wrap-in-html.js (abridged)
show code

const all = ['link', 'script', 'title', 'body_attrs', 'html_attrs', 'title', 'meta', 'page', 'style', 'headScript', 'bodyScript'],
place = {};
all.forEach(e=>place[e] = `__::${e}::__`);
/* Usage: let wrapper = wrapInHTML({}); wrapper.place['script']
   places <script __::script::__></script> for a value to be slotted in via
   wrapInHTML.slotIn({script:["src=... integrity=... async"]})
*/
function wrapInHTML(settings/*, other parameters: link, script, ...*/) {
 /*
    link = settings.link||['__::link::__'],
    script    = settings.script||['__::script::__'],  
    html_attrs  = ' '+(settings.html_attrs||'__::html_attrs::__'),
    title   = settings.title||'__::title::__'
    meta    = settings.meta||'__::meta::__',
    page    = settings.page||'__::page::__',
    body_attrs  = ' '+(settings.body_attrs||'__::body_attrs::__'),
    style = settings.style||['__::style::__'],
    headScript  = settings.headScript||'__::headScript::__',
    bodyScript  = settings.bodyScript||'__::bodyScript::__';
 */
  result = 
  `<!DOCTYPE HTML>
  \t<html${html_attrs}>
  \t\t<head>
  \t\t\t<title>${title}</title>
  \t\t\t${meta.replace(/\n/g, '\n\t\t\t')}
  `;
    link.forEach(e=>{
      result +=
  `\t\t\t<link${(' '+e).replace(/^\s+/, ' ')}>
  `})
   /* ... and so on. The value of result is retained in this function for use by the  helper 
      functions below until changed by calling wrapInHTML({/**/})
  */
  wrapInHTML.slotIn =(obj, str)=> {
  /* obj is similar to settings above and it is used to slot in custom fields to the value of result
      gotten by the most recent call of wrapInHTML({/**/}). Does not modify the internal value of result
  */
  }
  wrapInHTML.cleanse = function(str) {
    str ||=result;
    /* modifies unused attributes such as <script __::script::__></script> into <script></script>.
      Does not modify the internal value of result
   */
   return str;
  }
  return result;
}
module.exports  = {wrapInHTML, place};

Usage
show code

const wrapper      = require('./utils/wrap-in-html'),
      wrapInHTML   = wrapper.wrapInHTML;
 
let home, about, template = wrapInHTML({
  link:['rel="shortcut icon" href="../favicon.ico"', 'rel="stylesheet" href="css/build.css" preload="true"',
  'rel="stylesheet" href="css/tailwind.min.css"', 'rel="stylesheet" href="css/all.min.css"'],
  script: ['src="js/ripples.js" defer=true', 'src="js/utils.js"',  wrapper.place['script']],
  meta:`<meta charset="utf-8">
    <!-- <meta http-equiv="refresh" content="3"> -->
    <meta name="theme-color" content="#ff056">
    <meta name="color-scheme" content="light">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">`,
});
 
home = wrapInHTML.slotIn({
    script: ['src="js/optimized.js"', 'src="js/deferred.js" defer=true'],
    link:['rel="stylesheet" href="css/glitch-hero-image.css"'],
    title: '<Website name> | <keywords>,
    page: '<body.innerHTML>',
    style:[`* {box-sizing:border-box}`],
    headScript: 'let w = window;',
    bodyScript: 'w.onload=function(){/**/}',
}),
about = wrapInHTML.slotIn({
    script: ['src="js/deferred_2.js" defer=true'],
    title: '<Website name> | <keywords>,
    page: partial,
    style:[`* {box-sizing:border-box}`],
    headScript: 'let w = window;',
    bodyScript: 'w.onload=function(){/**/}',
    html_attrs: 'data-scroll="0"'
})

Manipulating DOMStrings in Node.js

This code base is just a working, practical concept on how serving HTML in Node.js may be improved, it may later become either a GitHub repository or npm package

JS & HTML as regards this site
${window.location.href}

This site uses an object pageData to store key nodes, Nodelists and functions as properties or as nested objects. Other needed nodes are then accessed via their parent, sibling, child relationships with these key nodes.

An example is the fixed navigation on this page accessed anywhere via pageData.article_1.nav,the code to collapse or expand it onclick or (body > main).onscroll uses pageData.article_1.nav_arrwhich gets defined when the collapse button on nav gets clicked the very first time as follows

HTMLButtonElement.onclick = function() {
  let pN=this.parentNode;
(pageData.article_1.nav_arr||=
slice(pN.children, 0, 2))
/* other scripts */
}

Given that the script that expands or collapses the nav when scrolling the page checks whether pageDate.article_1.nav_arr is defined, the expanded state of nav at the beginning of the page and during scrolling become defaults with no JavaScript

In order to make walking the DOM via relationships easy, objWalk is defined with abbreviations set through

objWalk.setDict(['classList', 'previousSibling', 'nextSibling', 'lastChild', 'firstChild', 'nextElementSibling', 'previousElementSibling', 'parentNode', 'lastElementChild', 'childNodes', 'firstElementChild'])

which defines objWalk.dictas

{ "fEC":"firstElementChild", "cN":"childNodes","pN":"parentNode", "lEC":"lastElementChild", "pES":"previousElementSibling", "nES":"nextElementSibling", "fC":"firstChild","lC":"lastChild", "nS":"nextSibling", "pS":"previousSibling","cL":"classList" }

objWalkis used as follows

objWalk(<HTMLElement>, [{2:'pN'}, {2:'nES'}, 'cL']) to access the classList of the two nextElementSiblings of the parent of the parent of <HTMLElement>

Alternative to Task Runners in Node.js

### style.sh
#!/usr/bin/env bash
cat ./src/styles/*.scss | sass > ./public/dist.css
 
### script.sh
#!/usr/bin/env bash
cat ./src/scripts/*.js > ./public/dist.js
 
### build.sh
#!/usr/bin/env bash
./style.sh
./script.sh

It compiles .scss into css and puts the result into ./public/dist.css. It also puts all the contents of the .js files in ./src/scripts/ into ./public/dist.js.

It may be used in lieu of the more common task runners; gulp, grunt, jest, with or without Node.js

sourceblog.logrocket article on Node.js task runners vs. module bundlers

1. What skills could you confidently teach?* Frontend Engineering Web Development & Design UI/UX Nodejs _____________________ 2. What practical experience do you have with these skills?* ---------------------- At the client side, I used vanilla JS, tailwind CSS and HTML to build a client's website of ~30kb core size which then uses progressive enhancement to fetch and cache content, images, CSS and JavaScript code needed further below in the page and on other pages. The localStorage API, not the server is then queried the next time i.e. a page reload or subsequent visit thereby reducing page load times and increasing page speed. At the server side, I decided after benchmarks in development with a non-express, simple Nodejs server I wrote that using the JSON schema for the requested assets led to bloat and performance loss in parsing it and opted for plain text. In doing so, I was able to conveniently group together CSS styles, JavaScript code and URLs of images and actual content in the .txt files which were by now, much smaller in size than if they were .json. WHAT I LEARNT 1. The simple solution is the most obvious one. 2. Best practices can be improved... _______________________ 3. What ways are you active in topic-related communities? ------------------------ I participated in the TC39 community - the group in charge of the specifications and versions of EcmaScript. I provided a concise and efficient code for the Number.range method proposal. This proposal aims to make available in JS what is available in python as seen below. # start of code for (i in range(0, 10, 2)): pass # end of code with the same meaning, arguments and function - iteration, as the `range` function above. _________________________ 4. Why are you a great fit for teaching at Tuts+? -------------------------- I have years of experience, techniques and solutions that I want to pass up for scrutiny by the open source community, I write code and algorithms with attention to minute details such as the placement and type of the increment/decrement operation in a regular for loop - an action with surprising results that I have long since exploited in writing solutions that did more with less. I am a bare-bones developer that doesn't rely on frameworks (though, I can use them if required) and thus have total control over my code and freedom from the dependencies these frameworks drag along. I look forward to sharing my approaches while learning by constructive criticisms from the open source community at Tuts+ and beyond... __________________________ 5. Briefly describe your tutorial idea -------------------------- I want to show the amazing, code-saving and very useful behaviours of the largely unused 'pointer'-[down|move|up] events in JavaScript with a real-world, practical and readily applicable example involving using flex-basis to make a performant, partitioned, adjustable pane with two shrinkable sections that have their widths changed and trigger little reflow and repaint. This tutorial will further cement the co-ordinate system and position in a browser window with exemplary code that eases the confusion when trying to factor in movement relative to either side of the viewport width

O

G

Phiz

The Case Of A Functional App

A Minimalist HTML Visual Reference Generator For SVG Files Such As The Ones InFONT AWESOME

A Surmise of Both Content Generation and Design for the App

Prototyping its UI/UXexpand

Adding Flows to the UIexpand

"A Thousand Words" In Images

Vanilla HTML? No Frameworks

Template Engine - Handlebarsshow code

Discoverd Alternativeshow code

wrap-in-html.js (abridged)show code

Usageshow code

JS & HTML as regards this site ${window.location.href}