Introduction

Welcome to Pippim’s website powered by GitHub.

Tim-ta lets you create and run timers for:

  ◆   Doing Laundry
  ◆   Cooking Food
  ◆   Working Out
  ◆   Limiting Computer time

Pick from stock alarm sounds or upload your own alarm sounds. Backup your Tim-ta projects and transfer them to other browsers, other devices or other users. Import projects from other Users or Devices.

Hyperlink Recipe Baker is an invaluable tool for those who write articles about the internet, technical documents or sales literature that reference other articles.

Convert your popular Stack Exchange Posts to your own website with additional features like; Table of Contents, Section Navigation buttons, Copy code blocks to clipboard and Show summary statistics. You can see the results by clicking the ✅ Answers button above.

A different kind of site search engine greets you. Others operate at an average speed of 2.5 MB/s (Megabytes per second) over the internet. This one runs at the speed of RAM; about 19,200 MB/s!

There are no ads on Pippim. You can’t buy Pippim a coffee. No third party websites are used to deliver Pippim website content. It is impossible for Pippim to collect your data and store it on the Pippim website because it is hosted by GitHub.

Navigation Buttons

This section discusses the Page Navigation Buttons that appear on the top of each page. Then we will discuss the Section Navigation Buttons that can appear at the top of major sections.

Page Navigation Buttons

The top of each page contains a search bar and navigation buttons to take you to other pages:

• ⌂ Home brings you to this page.

• ❓ About discusses everything you want to know about Pippim. Still have questions? Just email.

• ✅ Answers to questions people have using computers. As of February 20, 2023, Pippim answers have over 60.7 million views!

• 💻 Programs are applications Pippim created to make your life easier.

• 📧 Email lets you send an email to Pippim.

Section Navigation Buttons

The top of major sections contain navigation buttons to take you to other sections:

• Top - Displays the top of the page

• ToS - Displays the top of the previous section

• ToC - Displays the Table of Contents

• Skip - Skips the section and displays the next section

Get in Touch

There are many ways to contact Pippim. The conventional way is via email. Another way is commenting on Stack Exchange Posts or GitHub Repos.

The Conventional Way of Getting in Touch

Get in touch with Pippim by sending an email.

• 📧 Send an Email to Pippim 🔗

Leave a Comment / Question at The Source

Leaving a comment or question at the source such as Stack Exchange answer or GitHub Repo saves you from specifying what your communication is referring to.

Stack Exchange Answers (Ask Ubuntu)

You can leave a comment or question where the Stack Exchange answer appears. Each answer on this website here has a direct link to the original answer on Stack Exchange.

GitHub Repos

For Pippim programs on GitHub Repos, you can go directly to the repository and post a new issue. Issues can be bug reports, questions, requests for new features or enhancements to existing functions.

Cookies

There is one cookie used on the Pippim website. It remembers the status of the “More” or “Less” button for blog posts. You can disable the cookie using links below.

Disable Cookies in Chrome

Clear, enable, and manage cookies in Chrome 🔗

Disable Cookies in Firefox

Block websites from storing cookies in Firefox 🔗

To protect your More/Less cookie setting (not that it would do a spy any good), SameSite policy is set to “Strict” so you know no one else can read it. Also it is stored on your local browser and not sent to any file server or the cloud. You can view this in the file assets/js/post_fm.js:

document.cookie = cname + "=" + value + ";" + expires + ";path=/" +
                    ";SameSite=Strict";

The above is code from line 9 of the file.

The same code can be found in /assets/js/theCookieJar.js. Here a cookie is created to remember the Cookie Machine button’s visibility on all pages.

GitHub Pages

The Pippim website is hosted on GitHub Pages. You can download (or simply view) the Pippim website markdown files. For example, index.md is the markdown file for the page you are reading now and available here 🔗.

Get your own website up and running in a weekend by picking from a collection of website designs called themes. Then type your information into markdown files.

GitHub Pages is free. Change your website from a MAC, a PC running Windows or Linux, and even a smart phone.

TL;DR

“TL;DR” stands for “Too Long, Didn’t Read”. So unless you are truly interested in the technology of websites and how this website in particular was created, you will probably want to stop reading the rest of this page.

Whenever you commit to a website repository, GitHub Pages will run Jekyll 🔗 to rebuild the pages in your site, from the content in your Markdown files.

The Pippim website is based on the GitHub Pages Jekyll theme called Cayman 🔗. Initial setup was straight forward and very quick. However adding custom buttons becomes more complicated as you need to learn HTML 🔗 and Sass/SCSS 🔗.

Markdown

GitHub Pages and many other websites use a language called Markdown. Markdown is a lightweight and easy-to-use syntax for styling your writing. It includes conventions for:

Syntax highlighted code block

# Header 1
## Header 2
### Header 3

- Bulleted
- List

1. Numbered
2. List

**Bold** and _Italic_ and `Code` text

[Link](url) and ![Image](src)

For more details see GitHub Flavored Markdown 🔗.

How the Table of Contents is Generated

All markdown headers with #, ## and ###, etc. are used to create the Table of Contents (TOC). A little bit of one-time prep work is required for TOC support. For example, the file _sass/toc.scss is setup with:

.screen-reader-only {
    position: absolute;
    left: -5000px;

    &:focus {
        left: 0;
    }
}

Another one-time setup is the file _includes/toc.md containing the markdown for how the TOC looks and functions. This file contains:

## Table of Contents
{:.no_toc}

* TOC
{:toc}

To get a Table of Contents (TOC) in any website page, insert a liquid tag where you want the TOC to appear. For example on this page you are reading, index.md, is the following markdown code:

... you are reading, `index.md`, is the following markdown code:

{% include toc.md %}

<a id="hdr6"></a>
<div class="hdr-bar">  <a href="#" class="hdr-btn">Top</a> ... </div>

The TOC command is used in real markdown below and generates the actual TOC:

Table of Contents

• Introduction
  • Navigation Buttons
    • Page Navigation Buttons
    • Section Navigation Buttons
  • Get in Touch
    • The Conventional Way of Getting in Touch
    • Leave a Comment / Question at The Source
      • Stack Exchange Answers (Ask Ubuntu)
      • GitHub Repos
• Cookies
  • Disable Cookies in Chrome
  • Disable Cookies in Firefox
• GitHub Pages
  • TL;DR
  • Markdown
  • How the Table of Contents is Generated
  • Jekyll Themes
  • Images, Javascript, CSS and HTML
  • Pippim Website Directory Tree
  • Daily Backup
  • Convert Stack Exchange to GitHub Pages

Jekyll Themes

There are many GitHub Pages Jekyll Themes 🔗 you can pick from for your website. Spend some time reviewing your options before committing to one.

Initially the Pippim website used the Cayman Theme for a day. Then the Merlot Theme was used for a week and, then it came back full circle to the Cayman Theme again.

At first the Cayman Theme didn’t display the page title properly 🔗. Consequently, the Merlot theme was used. However, problems arose with the Merlot banner on the left not rendering properly on small screens. So it was back to Cayman and after changing the theme, the page title worked properly. New problems arose with the page buttons, Home, About, etc. With trial and error however those problems were solved too.

This is the first website Pippim created. The somewhat naive initial estimate was it would take a weekend to create. That estimate was back on October 16, 2021 and today is January 9 2022. The moral of the story is: “It may take longer than expected to set up your first website but, don’t give up.”   You can do it! 😄

Your GitHub Pages site will use the layout and styles from the Jekyll theme you have selected in your repository settings 🔗. The name of this theme is saved in the Jekyll _config.yml configuration file.

GitHub Pages maintains a real-time listing of version numbers 🔗 for Jekyll, Sass, kramdown, Rouge, etc..

There are many open-source providers involved in the Pippim website:

• GitHub Pages - Websites for you and your projects. 🔗
• Jekyll - Transform your plain text into static websites and blogs. 🔗
• Liquid - Jekyll uses the Liquid templating language to process templates. 🔗
• Sass - Sass: Syntactically Awesome Style Sheets 🔗
• Cayman Theme - Cayman is a Jekyll theme for GitHub Pages. 🔗
• Ruby - dynamic, open source programming language 🔗
• Rouge - language syntax highlighting 🔗
• kramdown - converting a superset of Markdown 🔗

Images, Javascript, CSS and HTML

It is important to follow these instructions to setup your site: Adding a theme to your GitHub Pages site using Jekyll 🔗. For example, _layouts/default.html probably needs to be copied from the theme website to your own website in order to make significant changes.

There are many file types in the Pippim website stored at various locations:

• A few local images are stored in assets/img/ directory. The hundreds of images in blog posts come directly from Stack Exchange and are not stored on the pippim.github.io website.
• SCSS and Sass CSS 🔗 files are mostly stored in the assets/css/ directory. Some are stored in the _sass/ directory. The _sass/ directory has files you can’t see in pippim.github.io because they are really stored in the Cayman Theme for Jekyll and automatically pulled from there whenever website is rendered.
• This ⌂ Home page is stored in index.md file in the root directory (/).
• The ❓ About page is stored in about.md in /.
• The ✅ Answers page is stored in answers.md in /. Individual answers are internally known as “blog posts” and are stored in the _posts directory with one file per answer.
• The 💻 Programs page is stored in programs.md in /.
• HTML encoding can be found in any file. Small bits and pieces of HTML can beven be found in and markdown files which end in .md. Pure HTML files (with no markdown or CSS) can be found in the _includes directory.
• Javascript files are kept in assets/js/.

Pippim Website Directory Tree

The directory tree will help you get a better understanding of the Pippim website at pippim.github.io. As of February 20, 2023, the directory tree for Pippim on GitHub Pages looked like this:

├── assets
│   ├── css
│   │   └── style.scss
│   ├── img
│   │   ├── hrb
│   │   ├── icons
│   │   ├── mserve
│   │   ├── mt
│   │   ├── stack
│   │   ├── tcm
│   │   ├── tim-ta
│   │   ├── ask_ubuntu.png
│   │   ├── Ask Ubuntu profile.png
│   │   ├── Blog_Project-Management-101.png
│   │   ├── cookie-clicker.png
│   │   ├── earth-from-space.jpg
│   │   ├── Edm Temp 2022-01-26.png
│   │   ├── Edm temperature April 7, 2022.png
│   │   ├── Edm Temperature December 7, 2021.png
│   │   ├── github pages themes.png
│   │   ├── inspectocat.jpg
│   │   ├── Octocat.png
│   │   ├── octojekyll-opt.jpg
│   │   └── pngwing.com.png
│   ├── js
│   │   ├── hrb.js
│   │   ├── hyperlinkRecipe.js
│   │   ├── post_fm.js
│   │   ├── search.js
│   │   ├── setRootColors.js
│   │   ├── sound.js
│   │   ├── theCookieJar.js
│   │   ├── theCookieMachine.js
│   │   └── tim-ta.js
│   ├── json
│   │   ├── search_exclude.json
│   │   ├── search_url.json
│   │   ├── search_words.json
│   │   └── website_tree.json
│   └── sound
│       ├── Alarm_01.mp3
│       ├── Alarm_02.mp3
│       ├── Alarm_03.mp3
│       ├── mixkit-alarm-clock-beep-988.mp3
│       ├── mixkit-alarm-digital-clock-beep-989.mp3
│       ├── mixkit-alert-alarm-1005.mp3
│       ├── mixkit-critical-alarm-1004.mp3
│       ├── mixkit-game-notification-wave-alarm-987.mp3
│       ├── mixkit-rooster-crowing-in-the-morning-2462.mp3
│       ├── mixkit-security-facility-breach-alarm-994.mp3
│       ├── mixkit-short-rooster-crowing-2470.mp3
│       ├── mixkit-slot-machine-win-alarm-1995.mp3
│       └── mixkit-street-public-alarm-997.mp3
├── _includes
│   ├── draggable-window.js
│   ├── getRootColors.js
│   ├── head-custom.html
│   ├── image.html
│   ├── posts_by_tag.html
│   ├── posts_by_vote.html
│   ├── search.html
│   ├── tcm-common-code.js
│   ├── tcm-draggable-window.html
│   ├── test.html
│   ├── timne-ta-storage.1.0.js
│   ├── tim-ta-storage.js
│   ├── toc.md
│   ├── website_tree.html
│   └── website_tree.txt
├── _layouts
│   ├── default.html
│   ├── hrb.html
│   ├── page.html
│   ├── post.html
│   ├── program.html
│   └── test.html
├── _posts
│   ├── 2016 [179 entries exceeds filelimit, not opening dir]
│   ├── 2017 [155 entries exceeds filelimit, not opening dir]
│   ├── 2018 [443 entries exceeds filelimit, not opening dir]
│   ├── 2019 [273 entries exceeds filelimit, not opening dir]
│   ├── 2020 [65 entries exceeds filelimit, not opening dir]
│   ├── 2021 [33 entries exceeds filelimit, not opening dir]
│   └── 2022
│       ├── 2022-01-05-How-to-print-out-status-bar-and-percentage_.md
│       ├── 2022-01-05-Python-to-print-out-status-bar-and-percentage.md
│       ├── 2022-02-12-How-to-change-_lsblk_-sort-order_.md
│       ├── 2022-02-18-Convert-Stack-Exchange-posts-to-your-own-website.md
│       ├── 2022-02-18-Unable-to-lock-screen-with-Cron-or-Settings.md
│       ├── 2022-02-23-Frequent-switches-between-Ethernet-and-Wifi.md
│       ├── 2022-02-24-stdin_-invalid-argument.md
│       ├── 2022-03-09-SyntaxError_-__-string-literal-contains-an-unescaped-line-break.md
│       ├── 2022-03-13-Temporarily-disable-distracting-software.md
│       ├── 2022-03-14-How-to-adjust-Trackpad-_Tap-Sensitivity_-without-adjusting-mouse-speed.md
│       ├── 2022-03-20-Ubuntu-can_t-find-Wifi-Driver-on-Maestro-Laptop.md
│       ├── 2022-04-13-How-does-Ubuntu-handle-addition-of-RAM_.md
│       └── 2022-06-12-How-to-kill-a-program-after-it_s-executed-from-a-script_.md
├── programs
│   ├── hyperlink.md
│   ├── mserve.md
│   ├── mt.md
│   ├── programs.md
│   ├── stack.md
│   ├── tcm.md
│   └── tim-ta.md
├── _sass
│   ├── jekyll-theme-cayman.scss
│   ├── normalize.scss
│   ├── rouge-github-monokai-sublime.scss
│   ├── rouge-github-original.scss
│   ├── rouge-github.scss
│   ├── rouge-github-virtua-creative.scss
│   └── toc.scss
├── sede
│   ├── check-html-ids.py
│   ├── refresh.sh
│   ├── rouge_languages.txt
│   ├── StackQuery
│   ├── stack-to-blog.py
│   └── website_search.py
├── about.md
├── answers.md
├── CNAME
├── _config.yml
├── favicon.png
├── hrb.md
├── index.md
├── LICENSE
├── programs.md
├── style.scss
└── test.md

26 directories, 105 files

NOTE: The _posts directory contains 1,160  posts which are not displayed above.

Daily Backup

Normally you will git pull all the directories and files from your website to your local drive. If you plan on developing locally, you probably want to save your daily work. This script is what Pippim uses for daily backup to gmail.com (in the cloud, so it should be safe):

# WEBSITE - Local copies of files on pippim.github.io (EXCLUDES /assets/css/img)
tar -rpf "$Filename" website/*.md       # about.md, answers.md, programs.md
tar -rpf "$Filename" website/*.yml      # _config.yml
tar -rpf "$Filename" website/_includes  # copyHeader.html, image.html & toc.md
tar -rpf "$Filename" website/_layouts   # default.html & post.html
tar -rpf "$Filename" website/_plugins   # insert_git_code.rb (NOT supported)
tar -rpf "$Filename" website/_sass      # jekyll-theme-cayman.scss & toc.scss
tar -rpf "$Filename" website/assets/css # style.scss file
tar -rpf "$Filename" website/assets/js  # javascript files
tar -rpf "$Filename" website/sede/*.sh  # refresh GitHub Pages each week
tar -rpf "$Filename" website/sede/*.py  # stack-to-blog.py and SEDE query below
tar -rpf "$Filename" website/sede/StackQuery

IMPORTANT NOTE:

Images are NOT included in the daily backup. This is because this is a small subset of my daily backup script that is called from cron every morning.

The full script compresses files and emails to gmail.com. Including images would make the backup exceed Google quotas of 20 MB per backup and 15 GB for all backups.

If you want to include images in your own backup, add the following to the daily backup script:

   tar -rpf "$Filename" website/assets/img # Image files

Convert Stack Exchange to GitHub Pages

Converting thousands of Stack Exchange Q&A in MarkDown format isn’t as easy as simply copying them over to GitHub Pages. The python program stack-to-blog.py was used to convert Stack Exchange posts to GitHub Pages Posts. The complete stack-to-blog.py program can be accessed on the Pippim Website repo 🔗.

The FULL DOCUMENTATION to Convert Stack Exchange Posts to Your Own Website for stack-to-blog.py used to create the posts on this Pippim website will help you create your own website.