Skip to main content

Colophon

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