Skip to main content

· One min read
John M Telford
caution

Work in Progress - v 0.1.4.4 - Apr 29, 2022

Welcome

This blog is the latest of many John Telford blog and website reincarnations over the years.

Way back when the internet was young, while researching I discovered blog and website site generator technologies, that seemed to bring something new to the party .

I sometimes do learn by doing, by taking deep technology dives by programming the next blog or website reincarnations using the technology du jour.

This blog is about interesting things found.


tip

Navigation : Finding things

The menu bar is at the top of the page:

Left Side of menu bar

  • Click on Home for the Home Page
  • Click on Blog for the blog
  • Click on Tags for a list of blog tags. Click on a Tag to see all of the blog pages with that Tag.

Right Side of menu bar Click on the symbol next to Search to switch between light and dark mode

Use Search to find webpages and Blog posts

  • The Left sidebar is a list of website page categories and individual pages.
    • Blog: The Left sidebar is a list of all posts
  • The Right sidebar is a table of contents of a page clicked on the Left sidebar

Small Screen

All of the above information is available on small screens.

  • Search
    Search is at the top left of the screen

  • Menu Bar
    Press the hambuger symbol at the top left of the screen, then press Back to main menu

  • Pages
    Press the hambuger symbol at the top left of the screen for list of website page categories and individual pages

  • Page Table of Contents
    Press the ∨ symblol on the right side of the On This Page to view the selected page table of contents


Company

info

I am the sole proprietor of JohnTelford.com LLC, a technology consulting company working with client development projects for more that 30 years.

Nuggets

Way back when the Internet web browsers and programming languages came along, I became interested in web technologies, and began learn by doing technology deep dives. I have years of learning ever changing Electronics, Software, and Web technologies by hands-on experiencing the technologies du jour.

I have a passion pursuing what’s new and improved with these industries. Checking out what’s new or not, a pipe dream or not, or what’s new and improved, is like panning for gold. Buried within the mountains of info rubble produced daily, every so often one finds interesting technology nuggets making the effort worthwhile. I use the Hype Curve as a guide.

I am an Electronics, Software, and Web Engineer specializing in website hardware and software technology disciplines:

  • Architecture
  • Development
  • Deployment

Contact

info

I am an Electronics, Software, and Web Engineer specializing in website hardware and software technology disciplines:

  • Architecture
  • Development
  • Deployment

A labyrinth symbolizes possible difficulties reaching website project goals. My knowledge and experience with website technology disciplines may be helpful.

Mug Shot

John Telford
Portland, Oregon
JohnTelford.com LLC

phone:text 503-312-7248

Email


· One min read
John M Telford

I am the sole proprietor of JohnTelford.com LLC. It is a technology consulting company working with client development projects for more that 30 years.

Nuggets

Way back when the Internet web browsers and programming languages came along, I became interested in web technologies, and began learn by doing technology deep dives. I have years of learning ever changing Electronics, Internet, and Software technologies by hands-on experiencing the technologies du jour.

I have a passion pursuing what’s new and improved with these industries. Checking out what’s new or not, a pipe dream or not, or what’s new and improved, is like panning for gold. Buried within the mountains of info rubble produced daily, every so often one finds interesting technology nuggets making the effort worthwhile. I use the Hype Curve as a guide.

I am an Electronics, Software, and Web Engineer specializing in website hardware and software technology disciplines:

  • Architecture
  • Development
  • Deployment

Contact

A labyrinth symbolizes possible difficulties reaching website project goals. Knowledge and experience with web technology disciplines may be helpful.

MugShot

John Telford
Portland, Oregon
JohnTelford.com LLC

phone:text 503-312-7248

Email


· 2 min read
John M Telford

Brochureware

websites I create are brochureware. The website material is text with graphics and links sprinkled in.

I am hesitant creating brochureware websites without using Markdown . It is quicker creating web pages using Markdown than HTML.

Troika

The troika of HTML, CSS, and JavaScript website programming languages have become standard for creating website pages, They are interpreted and rendered by web browsers.

The job of a blog or website development frameworks is to compile the troika and non troika programming languages, such as Markdown, into a combination of standard troika languages to be executed by web browsers.

Markdown

Markdown has a useful feature of enabling HTML syntax to be easily intermixed with Markdown syntax.

Most flavors of Markdown do not support image height or width attributes. An example using HTML embedded in Markdown is

This image <img src="whatever.png" height=400 width=400 /> is beautiful.

mdBook

The reincarnation of JohnTelford at the time of this posting, is created using mdBook

mdBook Documentation is a command line tool to create books or brochureware with Markdown.

  • Lightweight Markdown syntax helps focus more on content
  • Integrated search support
  • Color syntax highlighting for code blocks for many different languages
  • Theme files allow customizing the formatting of the output
  • Preprocessors can provide extensions for custom syntax and modifying content
  • Backends can render the output to multiple formats
  • Written in Rust for speed, safety, and simplicity

The mdBook Documentation is an example of what mdBook produces.

MdBook does not abstract React to create web components using React, MDX and JSX (JavaScript eXtended). More about this later when Docusaurus is discussed


· One min read
John M Telford

This latest incarnation of the John Telford website includes the content of the TechTalkJohn blog


Website Components

This site is built using website components :

  • Docusaurus is a static site generator. It is an open-source website framework created and open-sourced by Meta Open Source. It builds a single-page application with a fast client-side navigation, leveraging React to make websites interactive.

  • Features I like about Docusaurus are:

    • Powered by React,JSX and MDX
    • Extend and customize with React
    • Hot web browser reloading with fast incremental build on edit changes
    • Route-based code and data splitting
    • Heading anchor links
    • Check all links during build process
    • Check for errors by building deployment website on local server, using the same process as the deployment server
    • Search
    • Menus
      • Leftside - menu bar
      • Blog left side - posts
      • Rightside - page / post table of contents
    • Learn more
  • React is for building user interfaces (UIs). It is an open-source, front end, JavaScript library created and open-sourced by Meta Open Source .

  • MDX is Markdown Syntax built for the component age. It has identical syntax as Markdown. MDX is an author-able format that enables seamlessly writing JSX components in MDX documents. One can import React components such as user interfaces, interactive charts, alerts or other components.

Development Tools

Editor

I rank editors as the top of the development tools stack, as shown in the Development Stack. My choice is VScode (Visual Studio Code). Some useful extensions are:

  • Dark+ Material.
    The default Dark+ theme, using Material's color palette

  • ESlint.
    Integrates ESLint JavaScript into VS Code

  • GitHub Repositories.
    Remotely browse and edit any GitHub repository

  • Lorem Text Generator
    Lorem text generator extension for vscode

  • Markdown All in One
    All you need for Markdown (keyboard shortcuts, table of contents, auto preview and more)

  • MDX
    MDX for Visual Studio Code

  • Rainbow Brackets
    Provide rainbow colors for the round brackets, the square brackets and the squiggly brackets

  • Todo Tree
    This extension quickly searches (using ripgrep) your workspace for comment tags like TODO and FIXME, and displays them in a tree view in the activity bar

  • vscode-icons
    Icons for Visual Studio Code


iA Writer

I prefer iA Writer for editing website material and blog posts. Using iA Writerl is faster:

  • Focus without editor distractions
  • Grammar and spelling checking
  • Live Preview
  • Sort file
    • Name
    • Modification time
  • Text
    • Lookup
    • Transformation
  • ChronoSync is used to keep iA Write and local repository files in sync

Git Client

VScode built-in git commands :

  • Review diffs,
  • Stage files
  • Make commits
  • Push
  • pull

Fork

Git repositories are fundamental to a project, I use Fork to augment VScode git commands:

  • Repository Manager Summary and Statistics
  • Fetch, pull, push
  • Commit, amend
  • Create and delete branches and tags
  • Create and delete remote repos
  • Checkout branch or revision
  • Cherry-pick, revert
  • Merge
  • Rebase
  • Stashes
  • Submodules
  • Interactive rebase
  • Blame
  • Browse the repository file tree at any commit
  • Intuitive merge conflict resolving
  • Restore lost commits with Reflog
  • See stashes right in the commit list
  • Git-flow
  • Git LFS
  • GPG

Workstation

  • iMac 5K 27in
  • macOS Big Sur
  • 1Gb/s Internet connection

Deploy

  • Cloudflare
    • CDN
    • DNS
    • WARP

· One min read
John M Telford
info

The Iterative Website Development Stack illustrates how websites are developed and deployed to the Internet. It is web browser agnostic. What works for big screens, works for small screens.

Developer Iterative Development Stack

Development Stack


caution

The key Iterative Development technologies are git and GitHub.

  • Team members use the Website Development Stack to develop and deploy websites to the Internet.

    • There would be confusion and possible defects created if Team members were to directly make changes to the same project repository.

    • A solution to this problem is to have one central repository controlled by a gatekeeper. Each team member forks a copy to their GetHub account and makes a clone of it on their workstation.


  • Each developer makes changes to their repository clone. They cannot directly make changes to the central repository.

    • Team members commit changes to their local repository clone

    • They may deploy their local repository to a private Internet website for stakeholders to see and give feedback. See Preview Deployments

  • The process is managed using GitHub for Teams. When stakeholders determine developers changes, defect fixes, or new features are ready, a GitHub pull request is made by developers to the central project repository.

    • Project team members and the gatekeeper are notified by GitHub of the pull request. They may examine, comment on, suggest possible changes, and test the code.

    • When the team agrees on developers changes, they are committed to the central project repository by the gatekeeper. This process is repeated for each developer set of changes.

    • Iterations of the central project repository may be deployed by the gatekeeper to a private website for stakeholders viewing. See Preview Deployments

  • The next step is each developer pulls the central repository changes and commits them to their local repository copy of the central project. This process keeps team members up to date on changes.

  • The central project repository may be deployed to the public Internet by the gatekeeper after stakeholders agree there have been sufficient development and testing iterations.

—-

· 2 min read
John M Telford

Deep Technology Dives

I have been doing deep technology diving exploring website site generators over the years. I have chosen to reincarnate JohnTelford.com website using mdBook and TechTalkJohn blog websites using Docusaurus.


jamstack

Some website site generators I experienced did not have some of the out-of-the-box features I was looking for.

My preference for website site generators are based on Jamstack architecture

Some out-of-the-box missing aributes I was looking for in deep technology dives were:

  • Sidebar Menu
  • Automatic last update date of file
  • File tags
  • An integrated blog
  • JSX embedded Markdown

I found these and more attributes in some of the website site generators listed in Site Generators.


· 6 min read
John M Telford

The Hype Curve helps separate reality from fiction.


Hype Curve

Hype Curve


Points of Interest

The Hype Curve points of interest are:

Technology Trigger

A potential technology breakthrough happens.

Peak of Inflated Expectations

Early publicity produces a number of success stories and often accompanied by stories of failures. Some companies may take corrective action but most don’t.

Trough of Disillusionment

Interest wanes as experiments and implementations fail to deliver on the hype.

Slope of Enlightenment

Technology consumers begin to understand the technology better and how it may benefit them.

Plateau of Productivity

Mainstream adoption starts to take off. Some technologies making it to the Plateau of Productivity may be doomed to the spiral of death by inattention to details of keeping products alive.


· 2 min read
John M Telford

The basic idea of Iterative Development is to develop a system through repeated cycles (iterative) and in smaller portions at a time (incremental), allowing iterative development teams to take advantage of what was learned during development of earlier parts or versions of the system.

Teams

Teams

Iterative Development Teams

ItIterative website development teams working together can help optimizing website costs and lower some the difficulties creating websites

Iterative website development enables the Define, Design, Develop, Deploy and Maintain teams to be operational at the same time creating, testing and remediating website defects

Central Repository

The core of Iterative Development is a file central repository controlled by a gatekeeper.

GitHub is a Distributed Version Control Systems enabling multiple teams to work separately without having an impact on the work of others. GitHub is a central online web hosted project repository for all project files. It is a unified source of truth. It helps teams collaborate and maintain the entire history of project file changes. Teams can view history of all changes and go back to previous file versions.

It helps answer the questions who changed what, where, when, and why?

All team members have their own local copy of the central project repository. They make changes, fix defects, add new features to their repository, without interfering with others team members, or the central repository.

Team members cannot directly make changes to the central repository. They may deploy their copy of the repository with their changes, to a private Internet website for stakeholders to see and give feedback.

When stakeholders determine some changes, defect fixes, or new features are ready, they will be committed to central project repository, and team members update their local copy by pulling central repository changes into their local repository. This process keeps team members up to date.

· One min read

This website is the latest of many JohnTelford.com reincarnations over the years. When I discover a website development framework technology that seems to bring something new to the party, I sometimes do a learn by doing deep technology dive by programming the next ** reincarnation.