Skip to main content

2 posts tagged with "Troika"

View All Tags

· 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