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
- Algolia DocSearch
- Local Search - Small and is downloaded to browsers
- 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 paletteESlint.
Integrates ESLint JavaScript into VS CodeGitHub Repositories.
Remotely browse and edit any GitHub repositoryLorem Text Generator
Lorem text generator extension for vscodeMarkdown All in One
All you need for Markdown (keyboard shortcuts, table of contents, auto preview and more)MDX
MDX for Visual Studio CodeRainbow Brackets
Provide rainbow colors for the round brackets, the square brackets and the squiggly bracketsTodo 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 barvscode-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