The Cookie Machine - Click here to drag window

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

If you can read me, I'm broken!

ToC Skip

Introduction

TCM Header with Gingerbread Man.png
The Cookie Machine's Gingerbread Man Button on far right.

The Cookie Machine, commonly abbreviated as TCM, button is on the webpage header as shown above. The normally transparent “Gingerbread Man” icon, is now visible. When visible, it always appears in the same spot at the top of the Pippim webpage.

TCM is new technology that repurposes “Cookies”. Cookies were historically used to track your activity on the the internet. With TCM, cookies are used to save, share and quickly import configurations from other browsers, users and devices.

Development began on February 25, 2022 and should take about six months to complete.


Top ToS Skip

Table of Contents

TCM transparent button.gif
The Cookie Machine Transparent Button

How to Open The Cookie Machine (TCM)

There is a transparent button you can select to open The Cookie Machine (TCM).

As the .gif animation above shows, the transparent button is located to the far right of the regular buttons. It is the same height as the regular buttons.


Top ToS ToC Skip

TCM Draggable Window

TCM Draggable Window
The Cookie Machine Draggable Window

When you open The Cookie Machine (TCM for short), a draggable window appears. As show above, click and hold the title bar to drag the window anywhere on your screen. If you drag it so far off the screen you can’t access the title bar anymore, simply refresh the screen and no work is lost.


Top ToS ToC Skip

TCM Window Buttons

TCM Window Buttons
The Cookie Machine Buttons

The TCM Window Buttons brighten as you hover over them. Selecting a button instantly changes the window’s content. In the above animation however, each button is merely hovered over.

TCM Window Button Large Icons

Here are all the TCM Window Buttons at twice their normal size. In the next section a brief table summary of what each button does is presented. Click on the button or click “Read more…” to get more details.

TCM Window Button Summary Description

Button Description
TCM Icon - The Cookie Machine (TCM) Icon appears in the TCM Window title bar. It also appears in the webpage header after you close TCM. Clicking the TCM icon in the webpage header reopens TCM. Read more...
Home Page - Displays site wide global Jekyll Front Matter such as; URLs, number of views, number of posts, etc. Read more...
Cloud Storage - Displays Pippim website directory tree Read more...
Local Storage - Change cookies used for option settings such as; Less/More front matter and TCM Button visibility on page header. Read more...
Hyperlink Recipe Baker (HRB) - Used to create hyperlinks in HTML or Markdown format See the full documentation. Very handy for creating hyperlinks to the current webpage, without having to switch to another browser tab. Read more...
Webpage Information - Display Jekyll Front Matter for current webpage Read more...
Color Scheme - Pick Color Scheme for current webpage Read more...
Cookie Jar - The Cookie jar is for file uploads and downloads. Cookies and local storage is saved and retrieved from the Cookie Jar. Read more...

Top ToS ToC Skip

TCM Icon

The Cookie Machine (TCM) icon, TCM Icon is a Gingerbread Man.

When a Pippim webpage loads the Icon is in a transparent button you cannot see. If you position your mouse to the right after the “normal” buttons in the page header, the cursor changes shape. The cursor changing shape indicates you can now select the TCM Window button.

After selecting and then closing the TCM Window, the TCM Icon will appear in the webpage header. It will remain visible until a new webpage is loaded.

You can change the rules for TCM Icon visibility in the Local Storage section.


Top ToS ToC Skip

Home Button

The Home Button displays Jekyll Front Matter for the Pippim website. Front matter is stored as YAML key/value pairs in _config.yml.

Comments and blank lines are not displayed. The total number of lines count will includes comments and blank lines which are not displayed in the window.

The Home Button window contents are displayed below:


Top ToS ToC Skip

Cloud Button

The Cloud Button displays the Pippim website tree. This is useful information If you are a web developer. For the average user though, it has little value.

The website tree is not displayed in real time. Contents are taken from the file _includes/website_tree.txt which is manually uploaded from time to time. The file contents can be generated using the Linux tree command. See the refresh.sh bash script for an example 🔗.

The Pippim website tree is displayed below:

NOTE: Directory level depth is suppressed for /assets/img/icons subdirectory through /assets/img/stack/ subdirectory. This keeps the number of lines down. Similarly, the _posts directory contains 1,187  posts which are not displayed above.


Top ToS ToC Skip

Local Storage Button

The Local Storage Button is used to view and control cookie settings.

Cookies are stored locally within your Web Browser client settings. They cannot be viewed/changed by another webpage or webserver. They cannot be used by another Web Browser.

See the Cookie Jar if you wish to share cookies with another Web Browser, or another device, or another user.

The TCM Icon at the top of each webpage visibility is controlled by cookies described below.

On/Off slider switches are used to control when the TCM Button is visible at the top of webpages. When the switch is red it “off” and when it is green it is “on”.

In the TCM window’s local storage section you will see:

NOTE: The slider switches above are live and will effect TCM Button visibility as if you had set them in the Cookie Machine directly.

Objects are kept in Session Storage to save webpage load times. Once every 24 hours, Session Storage objects are refreshed from the Pippim Website. When a refresh occurs, a couple seconds of delay will occur on the first webpage read.

NOTE: Click the Name heading to sort rows

The Screen Interface 🔗 is used by the Pippim website to open new windows at appropriate screen locations.


Top ToS ToC Skip

The Hyperlink Recipe Baker Button spins up an instance of the Hyperlink Recipe Baker or, HRB for short.

This allows you to quickly create hyperlinks on any Pippim website page without having to switch browser tabs.

There are actually four instances of HRB available:

Instructions for using the Hyperlink Recipe Baker can be found here.


Top ToS ToC Skip

Webpage Information Button

The Webpage Information Button displays Jekyll Front Matter for the current webpage on the Pippim website. Front matter is internally stored as YAML key/value pairs at the top of each page.

Comments and blank lines are not displayed. The total number of lines count may include comments and blank lines which are not displayed in the window.

The Webpage Information window contents are displayed below:

There is little Jekyll Front Matter on the TCM webpage window. If you were to navigate to a blog post (in the “Answers” section) however, then you would see a lot more Front Matter.

The Window Object 🔗 is used by the Pippim website to open new windows at appropriate screen locations.

The Navigator interface represents the state and the identity of the user agent. It allows scripts to query it and to register themselves to carry on some activities.

See Navigator object 🔗 on MDN.


Top ToS ToC Skip

The Cookie Jar Button allows you to see, download/export, upload/import, create and delete Cookies.

The Cookie Jar was created because Cookies, Session Storage, Local Storage and Indexed DB are tightly controlled by Web Browsers. Web Browsers do not provide any means of transferring data in Cookies, Session Storage or Local Storage.

You can use the Cookie Jar for transferring data to:

Although the Cookie Jar can be set to the conventional folder name Donwloads, a separate folder can be used. For example, a folder named Cookie Jar could be created in your home directory.

Color Scheme Picker

The Color Scheme Picker is used to choose website color settings.

Originally the Pippim website only had one color scheme called “GitHub Pages Cayman Theme”. After a short period someone asked for a “Dark Theme” and a new project was started September 2022 and finished in October 2022.

Currently there are two stock color schemes:

Click the icon on the far left of screen to switch color scheme:




Color Codes

NOTE: The drop down menu is live and will effect color schemes immediately.


Top ToS ToC Skip

Future Plans

The color code charts above are system generated. Functions can be written to let you modify the color codes for each color schemes.


Top ToS ToC