The Cookie Machine - Click here to drag window

DUMMY TEXT - Real text set in assets/js/theCookieMachine.js

ToC Skip
GitHub Octocat Mascot by pngwing.com
GitHub's Octocat Mascot image credit: PNGWING πŸ”—

Introduction

Welcome to Pippim’s website.

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!

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.

There are no ads on Pippim. You don’t need to buy Pippim a coffee (it’s already free at work!).

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.

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

Section Navigation Buttons

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


Top ToS ToC Skip

Get in Touch

There are many ways of getting in touch with Pippim. The conventional way via email and on other websites. The direct method on Stack Exchange Answers or GitHub Repos.

The Conventional Way of Getting in Touch

Get in touch with Pippim by sending an email.

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)

Ask Ubuntu image

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

Inspector cat detective with magnifying glass

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.


Top ToS ToC Skip
Cookie image by cookie-clicker.co
Cookie image credit πŸ”—: Cookie-Clicker.co

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.

Octocat image by GitHub.com
Octocat image credit πŸ”—: github.com logos

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 πŸ”—.

Top ToS ToC Skip

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 πŸ”—.

Top ToS ToC Skip

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:

Top ToS Skip

Table of Contents


Top ToS ToC Skip
GitHub Pages Themes.png
Image credit πŸ”—: Yale University

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:

Top ToS ToC Skip

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:

Top ToS ToC Skip

Pippim Website Directory Tree

The directory tree will help you get a better understanding of the Pippim website at pippim.github.io. As of August 14, 2022, 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
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ sound.js
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ style.scss
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ 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
β”‚Β Β  β”œβ”€β”€ 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
β”‚Β Β  β”œβ”€β”€ tim-ta-storage.js
β”‚Β Β  β”œβ”€β”€ toc.md
β”‚Β Β  └── website_tree.txt
β”œβ”€β”€ _layouts
β”‚Β Β  β”œβ”€β”€ default.html
β”‚Β Β  β”œβ”€β”€ hrb.html
β”‚Β Β  β”œβ”€β”€ post.html
β”‚Β Β  β”œβ”€β”€ program.html
β”‚Β Β  └── test.html
β”œβ”€β”€ _posts
β”‚Β Β  β”œβ”€β”€ 2016 [177 entries exceeds filelimit, not opening dir]
β”‚Β Β  β”œβ”€β”€ 2017 [155 entries exceeds filelimit, not opening dir]
β”‚Β Β  β”œβ”€β”€ 2018 [439 entries exceeds filelimit, not opening dir]
β”‚Β Β  β”œβ”€β”€ 2019 [268 entries exceeds filelimit, not opening dir]
β”‚Β Β  β”œβ”€β”€ 2020 [61 entries exceeds filelimit, not opening dir]
β”‚Β Β  β”œβ”€β”€ 2021 [32 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
β”‚Β Β  └── 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
└── test.md

26 directories, 96 files

NOTE: The _posts directory contains 1,144β€… posts which are not displayed above.

Top ToS ToC Skip

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

Top ToS ToC Skip

Convert Stack Exchange to GitHub Pages

stack-to-blog.py
Progress Display Bar used by stack-to-blog.py

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.

Top ToS ToC