This is Wenchie.com, a brand new site by Wenchie that's just getting started. Things will be up and running here shortly, but you can subscribe in the meantime if you'd like to stay up to date and receive emails when new content is published!

Do you remember "Air Mail," and those handwritten letters that were written on the thinnest, lightest paper possible, to save on postage costs?

Well, they were hard to read back then, and they are even harder to read with a scanner nowadays. Why? Because the sender usually wrote on both sides of the paper, so the ink on the back side bleeds through to the front.

I was digitizing a lot of old family correspondence and I ran into this problem a lot. Yes, I know some scanners have a setting that lets you ignore "bleed-through," but mine doesn't seem to have that feature. So a typical scanned letter looks like this:

Luckily there is a simple solution. All you need to do is find something black, like a sheet of black paper, a book with a black cover, a teflon oven liner, anything. I am using a black rubber mousepad on this example. Lay your document on the scanner then lay the black object on top of it. Ta da! The "front" text will be much easier to read.

Now that I think of it, it would work even better if the backing sheet was the exact same color as the pen ink, but not having any navy blue mousepads laying around, I haven't tested that theory.

Facebook is so biased in favor of "verbal" people. It's like a boisterous dinner conversation dominated by the comedians and debaters and yellers. Everyone else is left on the sidelines, shyly and anonymously "sharing" rants and raves and memes created by other people.

Maybe every verbal person should adopt a non-verbal person and volunteer to be their translator.

After you have invested some time in learning HTML and CSS, you might be overwhelmed by the prospect of ALSO learning Javascript. Luckily, there are lots of things you can do with Javascript without actually knowing it. One easy win is manipulating the HTML and CSS you've already written. Anything you can do with a style sheet, you can change with Javascript. And you don't even have to write a function. You can copy and paste a short snippet of code into an anchor or button tag... it's not the 'right' way, but it works.

For example, here is a style called "#crazy" with a font-color of red. Click the words underneath to change its color:

#crazy {
  color:red;
  font-size:2em;
}

Do You Think I'm Psychedelic?

GREEN    PURPLE    RAINBOW

This is what my GREEN anchor looks like:

<a href="javascript:crazy.setAttribute('style','color:green');">GREEN</a>

Without knowing a lick of Javascript, you could modify that snippet to alter any style attribute in your entire document. Just be careful with your quotation marks -- singles and doubles are interchangeable, but still monogamous, so to speak.

Here is the PURPLE script. I've added both a positive and a negative text-shadow, which gives it that "Do I need glasses?" effect.

<a href="javascript:crazy.setAttribute('style','color:purple; font-style:italic; font-weight:bold; text-shadow:2px 2px orange,-2px -2px lime');">PURPLE</a>

And here is the RAINBOW text-shadow. It may be tacky, but it illustrates the fact that you can have multiple text-shadows, separated by commas. You have to make each one bigger than the last. They don't stack like pancakes, they expand like drops of food-coloring.

<a href="javascript:crazy.setAttribute('style','color:red;font-weight:bold;font-variant:small-caps;letter-spacing:0.3em;text-align:center;text-shadow:2px 2px 0 orange, 4px 4px 0 yellow, 6px 6px 0 lime, 8px 8px 0 blue, 10px 10px 0 mediumpurple');">RAINBOW</a>

To be continued:

One of the most common uses of this technique would be to make something visible or invisible...

You can change the styles inside a class or ID, or you can change classes and IDs...

You can change background images...

This exercise is a good demonstration of an important principle: you don't have to have any idea what you are doing to get in there and change things up.

When I was making my Manifesto page, I kept being annoyed by a mysterious, ugly control panel that clung to the top-right of my screen and wouldn't be moved.

Finally, I noticed that it had a "Close" button, so I was able to make it retreat, but then it lurked like a cockroach at the corner of my page, and reappeared full-size every time I refreshed.

Gradually, I came to understand what that little box was doing, and I saw the light. How awesome is that? A little panel that lets you change the original programmer's variables on the fly!

For example, here is my Columbine flag with low gravity, then high gravity.

Fun! If you haven't tried it yet, you should go to my Manifesto page and remove the pins that are holding up my flag. Isn't that a cool effect?

Until yesterday, I thought dat-GUI was part of Pixi.js. (GUI stands for 'graphical user interface,' by the way.). It wouldn't be worth "fixing up" if I was never going to use it again. But now that I understand that it's something you can use with any javascript program, it seems like an incredibly useful tool to have around, if only to impress readers with my programmer-like skills.

See, I can't take any credit for programming my "dangling cloth photo flag" myself (check out this guy and this guy), but it would still be impressive if I could say, "Hey, readers, while you're here, check out my mouseInfluence slider!"

But egads, it really is so ugly. It totally doesn't match my purply-bluey color scheme. And it doesn't have any place to put instructions for the user. It's really just a basic HTML input form, though, isn't it? Buttons and checkboxes and drop-downs, those can't be too hard to stylize, right?

The tricky part is that the interface is created on the fly by a javascript program that loads when the page loads. So you can't just look at the raw HTML and target the various controls with CSS. If you right-click and look at the source code for the page, you won't see the dat-GUI at all. So how can we target it?

Luckily, I've been mucking around a bit, so I have a head-start. I'm going to write this blog post as I am actually doing it, so you can follow along and modify it to suit your own purposes.

What is dat-GUI, briefly?

"dat.GUI is a GUI widget for your demos." The best place to see it in action is on this demo page for threejs. And you can check out awesome examples of 3-D rendering while you're at it.

It is a "lightweight controller library for JavaScript," made by Google, and kept here on GitHub

Here is a nice tutorial for using it, and here is where you can find the latest CDN version.

Here is a sweet little example which shows how you would create a rectangle and then vary all its options with a dat-GUI: https://codepen.io/webhacck/pen/mVQJVj

Here is an intense example showing a huge number of physics properties in one giant model: http://brm.io/matter-js/demo/#mixed

It consists of a single javascript file that you at the bottom of your HTML file in the usual way, such as:

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.1/dat.gui.min.js"></script>

But if you are going to edit some of the variables I mention below, you will probably want to use the un-minified version, which you can copy from here:

https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.1/dat.gui.js

I am using the most recent version 0.7.1 even though my project originally used 0.6.1 because I haven't noticed any changes in terms of how my flag controller works.

In addition to the actual dat.gui.js file, you will need the code that actually creates the GUI in the first place. I am working with the code that was written on the Codepen that I am borrowing from. I am assuming you are here because you already have a dat-GUI that you want to pretty up. If not, go borrow some code from the demo place that I mentioned.

The brute force method of CSS extraction

Before it occurred to me to look into the actual javascript file, I was planning to simply right-click on the widget and use the "inspector" tools available in Chrome and Firefox to figure out the CSS that we needed. Often, this very effective. Here, for example, you can see that the class name we need to target is "property-name".

What I like to do is create a mini stylesheet that targets each class or ID I find in the most extreme way possible.

span.property-name{
  background-color: midnightblue;
  color: white;
  text-align: center;
  font-family: serif;
  font-size: 1.1em;
  border-radius: 15px;
  border: 2px purple ridge;
  display: inline-block;
  height: 30px;
  line-height: 2em;
}

It's a good exercise for your brain to spew out random CSS properties and colors as quickly as you can. The goal is to make every item completely different from the others, so you can see exactly what each class or ID is targeting. Soon, you will have converted that boring, black GUI utility into an exciting, colorful monstrosity like this:

It's especially important to place brightly colored borders around things, which can reveal surprises, like when certain borders extend beyond the edges of their container.

Once you have figured out what's what, it's a simple matter to go back and tone down and up-class the mini CSS sheet you have created.

But sometimes you will get frustrated, because things just don't respond to your commands. The height of the rows, for example, seem to be impervious to the charms of my CSS.

Digging into the javascript

I won't bore you with the details of my explorations because I want to finish this project before I fall asleep tonight. I will just tell you a few things I have learned so far.

To free the GUI from its prison on the top right corner, do this

The first task is to rip that sticky beast off the top right side of your screen. And the way to do that, I have discovered, is to add this line to your code:

{ autoPlace: false }

More specifically, you want to add that to the place in your code where you actually create the new GUI, and you want to tell it where to put it instead. So you will see something like this:

let gui = new dat.GUI();

and you want to change it to something like this:

let gui = new dat.GUI({ autoPlace: false });
var GUIContainer = document.getElementById('my-gui-container');
GUIContainer.appendChild(gui.domElement);

Then, in your CSS you would want to position it where you want it to land. To do that, you need to use "absolute" positioning.<a href="javascript:void(0)" class="popover-dismiss" data-toggle="popover" data-trigger="hover" title="" data-content="If position:absolute doesn't work, remember that your container should be relative, not static.">

#my-gui-container {
	position: absolute;
    left: 600px;   /* position inside relatively positioned parent */
	top: 150px;
    z-index: 0;   /* adjust as needed */
}

Changes you can make to the javascript itself... if you do, you must keep track of it forever

Adust the default width variable

In the JS, you can change the default width for the entire controller by changing this variable:

GUI.DEFAULT_WIDTH = 245;

Change the wording on the Open and Close buttons

While you are there, you can change the text
//GUI.TEXT_CLOSED = 'Close Controls';
GUI.TEXT_CLOSED = 'Hide this control box';
//GUI.TEXT_OPEN = 'Open Controls';
GUI.TEXT_OPEN = 'Goof around with my Flag';

To get rid of the ugly skinny left borders

Comment out or change the colors on these:

/*
 * GETTING RID OF THE UGLY LEFT BORDERS

.dg .cr.boolean {
    border-left: 3px solid #806787
}

.dg .cr.color {
    border-left: 3px solid
}

.dg .cr.function {
    border-left: 3px solid #e61d5f
}

.dg .cr.number {
    border-left: 3px solid #2FA1D6
}
*/

Extract the CSS from the JS file

Luckily, we don't have to "figure out" the CSS that we need, because there is a CSS style sheet buried in the javascript file. Just search for "var styleSheet"

Yep, the entire, 400+ line stylesheet is just a single variable in javascript.

Now let's look at it!

Raw stylesheet extracted from 0.7.1 of dat.GUI

.dg ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    clear: both
}

.dg.ac {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    z-index: 0
}

.dg:not(.ac) .main {
    overflow: hidden
}

.dg.main {
    -webkit-transition: opacity .1s linear;
    -o-transition: opacity .1s linear;
    -moz-transition: opacity .1s linear;
    transition: opacity .1s linear
}

.dg.main.taller-than-window {
    overflow-y: auto
}

.dg.main.taller-than-window .close-button {
    opacity: 1;
    margin-top: -1px;
    border-top: 1px solid #2c2c2c
}

.dg.main ul.closed .close-button {
    opacity: 1 !important
}

.dg.main:hover .close-button,
.dg.main .close-button.drag {
    opacity: 1
}

.dg.main .close-button {
    -webkit-transition: opacity .1s linear;
    -o-transition: opacity .1s linear;
    -moz-transition: opacity .1s linear;
    transition: opacity .1s linear;
    border: 0;
    line-height: 19px;
    height: 20px;
    cursor: pointer;
    text-align: center;
    background-color: #000
}

.dg.main .close-button.close-top {
    position: relative
}

.dg.main .close-button.close-bottom {
    position: absolute
}

.dg.main .close-button:hover {
    background-color: #111
}

.dg.a {
    float: right;
    margin-right: 15px;
    overflow-y: visible
}

.dg.a.has-save>ul.close-top {
    margin-top: 0
}

.dg.a.has-save>ul.close-bottom {
    margin-top: 27px
}

.dg.a.has-save>ul.closed {
    margin-top: 0
}

.dg.a .save-row {
    top: 0;
    z-index: 1002
}

.dg.a .save-row.close-top {
    position: relative
}

.dg.a .save-row.close-bottom {
    position: fixed
}

.dg li {
    -webkit-transition: height .1s ease-out;
    -o-transition: height .1s ease-out;
    -moz-transition: height .1s ease-out;
    transition: height .1s ease-out;
    -webkit-transition: overflow .1s linear;
    -o-transition: overflow .1s linear;
    -moz-transition: overflow .1s linear;
    transition: overflow .1s linear
}

.dg li:not(.folder) {
    cursor: auto;
    height: 27px;
    line-height: 27px;
    padding: 0 4px 0 5px
}

.dg li.folder {
    padding: 0;
    border-left: 4px solid transparent
}

.dg li.title {
    cursor: pointer;
    margin-left: -4px
}

.dg .closed li:not(.title),
.dg .closed ul li,
.dg .closed ul li>* {
    height: 0;
    overflow: hidden;
    border: 0
}

.dg .cr {
    clear: both;
    padding-left: 3px;
    height: 27px;
    overflow: hidden
}

.dg .property-name {
    cursor: default;
    float: left;
    clear: left;
    width: 40%;
    overflow: hidden;
    text-overflow: ellipsis
}

.dg .c {
    float: left;
    width: 60%;
    position: relative
}

.dg .c input[type=text] {
    border: 0;
    margin-top: 4px;
    padding: 3px;
    width: 100%;
    float: right
}

.dg .has-slider input[type=text] {
    width: 30%;
    margin-left: 0
}

.dg .slider {
    float: left;
    width: 66%;
    margin-left: -5px;
    margin-right: 0;
    height: 19px;
    margin-top: 4px
}

.dg .slider-fg {
    height: 100%
}

.dg .c input[type=checkbox] {
    margin-top: 7px
}

.dg .c select {
    margin-top: 5px
}

.dg .cr.function,
.dg .cr.function .property-name,
.dg .cr.function *,
.dg .cr.boolean,
.dg .cr.boolean * {
    cursor: pointer
}

.dg .cr.color {
    overflow: visible
}

.dg .selector {
    display: none;
    position: absolute;
    margin-left: -9px;
    margin-top: 23px;
    z-index: 10
}

.dg .c:hover .selector,
.dg .selector.drag {
    display: block
}

.dg li.save-row {
    padding: 0
}

.dg li.save-row .button {
    display: inline-block;
    padding: 0px 6px
}

.dg.dialogue {
    background-color: #222;
    width: 460px;
    padding: 15px;
    font-size: 13px;
    line-height: 15px
}

#dg-new-constructor {
    padding: 10px;
    color: #222;
    font-family: Monaco, monospace;
    font-size: 10px;
    border: 0;
    resize: none;
    box-shadow: inset 1px 1px 1px #888;
    word-wrap: break-word;
    margin: 12px 0;
    display: block;
    width: 440px;
    overflow-y: scroll;
    height: 100px;
    position: relative
}

#dg-local-explain {
    display: none;
    font-size: 11px;
    line-height: 17px;
    border-radius: 3px;
    background-color: #333;
    padding: 8px;
    margin-top: 10px
}

#dg-local-explain code {
    font-size: 10px
}

#dat-gui-save-locally {
    display: none
}

.dg {
    color: #eee;
    font: 11px 'Lucida Grande', sans-serif;
    text-shadow: 0 -1px 0 #111
}

.dg.main::-webkit-scrollbar {
    width: 5px;
    background: #1a1a1a
}

.dg.main::-webkit-scrollbar-corner {
    height: 0;
    display: none
}

.dg.main::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: #676767
}

.dg li:not(.folder) {
    background: #1a1a1a;
    border-bottom: 1px solid #2c2c2c
}

.dg li.save-row {
    line-height: 25px;
    background: #dad5cb;
    border: 0
}

.dg li.save-row select {
    margin-left: 5px;
    width: 108px
}

.dg li.save-row .button {
    margin-left: 5px;
    margin-top: 1px;
    border-radius: 2px;
    font-size: 9px;
    line-height: 7px;
    padding: 4px 4px 5px 4px;
    background: #c5bdad;
    color: #fff;
    text-shadow: 0 1px 0 #b0a58f;
    box-shadow: 0 -1px 0 #b0a58f;
    cursor: pointer
}

.dg li.save-row .button.gears {
    background: #c5bdad url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAANCAYAAAB/9ZQ7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQJJREFUeNpiYKAU/P//PwGIC/ApCABiBSAW+I8AClAcgKxQ4T9hoMAEUrxx2QSGN6+egDX+/vWT4e7N82AMYoPAx/evwWoYoSYbACX2s7KxCxzcsezDh3evFoDEBYTEEqycggWAzA9AuUSQQgeYPa9fPv6/YWm/Acx5IPb7ty/fw+QZblw67vDs8R0YHyQhgObx+yAJkBqmG5dPPDh1aPOGR/eugW0G4vlIoTIfyFcA+QekhhHJhPdQxbiAIguMBTQZrPD7108M6roWYDFQiIAAv6Aow/1bFwXgis+f2LUAynwoIaNcz8XNx3Dl7MEJUDGQpx9gtQ8YCueB+D26OECAAQDadt7e46D42QAAAABJRU5ErkJggg==) 2px 1px no-repeat;
    height: 7px;
    width: 8px
}

.dg li.save-row .button:hover {
    background-color: #bab19e;
    box-shadow: 0 -1px 0 #b0a58f
}

.dg li.folder {
    border-bottom: 0
}

.dg li.title {
    padding-left: 16px;
    background: #000 url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) 6px 10px no-repeat;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2)
}

.dg .closed li.title {
    background-image: url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlGIWqMCbWAEAOw==)
}

.dg .cr.boolean {
    border-left: 3px solid #806787
}

.dg .cr.color {
    border-left: 3px solid
}

.dg .cr.function {
    border-left: 3px solid #e61d5f
}

.dg .cr.number {
    border-left: 3px solid #2FA1D6
}

.dg .cr.number input[type=text] {
    color: #2FA1D6
}

.dg .cr.string {
    border-left: 3px solid #1ed36f
}

.dg .cr.string input[type=text] {
    color: #1ed36f
}

.dg .cr.function:hover,
.dg .cr.boolean:hover {
    background: #111
}

.dg .c input[type=text] {
    background: #303030;
    outline: none
}

.dg .c input[type=text]:hover {
    background: #3c3c3c
}

.dg .c input[type=text]:focus {
    background: #494949;
    color: #fff
}

.dg .c .slider {
    background: #303030;
    cursor: ew-resize
}

.dg .c .slider-fg {
    background: #2FA1D6;
    max-width: 100%
}

.dg .c .slider:hover {
    background: #3c3c3c
}

.dg .c .slider:hover .slider-fg {
    background: #44abda
}

Subtitle: "How I made that "dangling cloth-like mesh with a photo on it" that you see on my "Manifesto" page"

This goes out to anyone who might be struggling to integrate PIXI graphics into a regular web page. I will address two main issues: (1.) getting your graphic into your DOM, and (2.) figuring out the transparency and z-index stuff. I will also include all the code for making my version of the "un-tearable photo cloth." It's not anything I can take credit for, please give a shout-at to the original makers.

According to Wikipedia, "Pixi.js is an open source, cross browser JavaScript 2D WebGL graphics library with canvas fallback."

Translation: "PIXI is a Javascript thing that helps you make online video games that other people can play right in their web browsers."

Making video games is NOT anything I find even remotely interesting. I'm too busy gnashing my teeth at the memory of all the money I spent on my kids' Gameboy, Gameboy Advanced, Nintendo 64, GameCube, Nintendo DS, Xbox 360, Wii, PS3, and PS4 gaming systems. I had to call one of them to get that list -- it was even longer than I remembered, and doesn't include the PC games like Winnie the Pooh, PlaySkool, Myst, Barbie Detective, Lemonade Tycoon, and all that. Every game between $30 and $60 a pop, in 'aught' dollars.

All right, I'm not interested in games, but I am interested in becoming a programmer, so there I was, admiring this masterpiece of Javascript programming on Codepen. If you haven't see it, you should, even though it is five years old. It has over 3 million views. To see the best part, drag over it with your RIGHT mouse button.

My main learning method is to copy cool things that other people made and try to get it running myself, so I copied his code and made a little demo on my own web page. But, when I tried to show it to someone, I discovered that it didn't work on "finger touch" devices, a.k.a. phones. So I went back to Codepen to read the comments, to see if there was a solution, and sure enough, I found this guy, who had not only adapted it for touch devices, but also figured out how to overlay a photo on the fabric. Try it out yourself.

Isn't that coolio? Of course, his version is not "tearable." The physics of ripping fabric apart is quite challenging, apparently, which is why the original has 3.5M views. But this guy's addition of a PHOTO made my future-blogger senses tingle. I mean, that's actually useful. You have to display photos anyway, so why not show them dangling on fabric?

Of course, I assumed I could just copy it, change the photo, and give credit to both brilliant guys, but, as always, nothing is every easy, especially when you have no idea what you are doing.

From full screen object to wee little node

PIXI is for game creators, and games usually take over the whole screen. A game is literally a giant canvas, with little objects that go around doing things. All I wanted was the dangling photo mesh, so I could include it in a blog post. To pop it into a div, so to speak.

I took my one Javascript class two years ago, so it took me two full days of trying to understand PIXI and "renderers" and "textures" and "nodes" to get it to work. Basically, I just created a div in my HTML document called "canvas-parent," and I figured out how to get the renderer to plop the new canvas inside of that div. Here is where my code deviates from the master:

let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
var canvasContainer = document.getElementById('canvas-parent');
canvasContainer.appendChild(canvas);

...THEN LATER ...

let stage = new PIXI.Container();
let renderer = PIXI.autoDetectRenderer(350, 500, {transparent: true }); 
canvasContainer.insertBefore(renderer.view, canvas);
renderer.render(stage);

Two things are different:
(1.) instead of appending the canvas to the body element with (document.body.appendChild(canvas);, which puts the fabric-photo at the way bottom of your page, I appended it to my "canvas-parent" div, and
(2.) instead of let renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight... which creates a full-screen container, I forced it to create a smaller 350x500 rectangle, similar to the size of a typical photo on a blog post.

When that finally worked (oh, the glory!), I thought I was scott free, but it turns out the hardest part was actually managing the CSS. If you look closely at the demo, you will see that he is actually creating TWO canvases. One seems to have the "mesh" and the other seems to have the photo -- also known as the "texture" -- and one lays on top of the other and they move in perfect synchronicity, like pair skaters.

That leads to two issues: positioning, and transparency.

To precisely position something in CSS, you have to use the dreaded position:absolute, which means you have to re-learn the lesson you have undoubtedly learned before, but forgotten about:

Whether you're working, studying, keeping up with the news, or just entertaining yourself, you will inevitably end up with a large number of tabs open on your browser.

For many of us, browser tabs have replaced To Do lists.

We keep tabs open on Google, Amazon, Facebook, Youtube, Craigslist, our bank, and our local government -- to remind ourselves to find the words to that song, send a happy birthday message, buy coffee filters, watch last night's monologue, look for a better desk, pay a bill, apply for a building permit.

Sometimes our browser windows get so crowded that the tabs become triangular specks, and when we try to click on one, we accidentally close it.

POOF! (<== hover over me!) There goes that thing we really wanted to remember.

Then, at the end of the day, we review all the tabs we still have open and exclaim, "Oh, no, I forgot to buy a battery charger, and I still want to read this essay, and none of these sites have the right guitar chords for that song!"

We don't want to turn off our laptops -- literally -- because we don't want to lose our browser tabs.

So instead of shutting them down, we put them to "sleep" -- again, just to preserve our browser tabs. But what does that accomplish? The next day, instead starting fresh, we start out with all that clutter. That's no good.

"That's what bookmarks are for," you say, "to save the sites you want to come back to." Yes, maybe they work for some people. But, honestly, the last time I tried to use browser bookmarks was a decade ago. They just grow so quickly out of control, and most of mine were labeled "Things to look at," "Show to kids," or "Save this."

It's even worse when your browser gets "smart" and decides to sync your ancient bookmarks with your new phone, so you're suddenly confronted with a page of "Favorites" labeled "To read," "Xmas '08" and "Mexico trip."

"Well, what about the browser history? Isn't everything already saved there, if you really needed to go back and find something?"

We know that browsers keep good records, because that's how people are always getting busted by the cops and their spouses. But we rarely look at it. Try clicking and holding on your browser's "Back" button until a menu pops up, then choose "Full History"... yikes, the level of detail is kind of creepy.

The problem with using your browser history" to remember the past is that it's way too detailed. For example, lately I've been working on the design of this very blog, so my History looks like this.

That's not very helpful.

So, what's the solution? How do we keep track of where we've been without having to create formal bookmarks for all fifty sites we visit every day? And how can we start fresh every morning without losing all the stuff we were interested in yesterday?

There are a lot of solutions out there, and I have tried several. TabCloud and OneTab come to mind. But the one that I am happiest with is a Chrome browser extension called "Session Buddy." Why? Because it's clean and simple, it's free, it doesn't make you look at ads, and it doesn't do anything unexpected. If you use Chrome as your primary browser, I highly recommend it.

Installing Session Buddy

Just go to their website, SessionBuddy.com and press the "Install" button.

That's it. Now look at the top right of your browser window, you should see a little blue folder icon. Click on that, and ta-da, your current collection of browser tabs has been saved.

You can now close your browser, turn off your computer, and go on with your life.

You have the option of naming your collections, or not. I usually don't, because I know they will be saved in chronological order, and that's good enough for me. But if most of my tabs are related to a particular topic, I might give it a name, to make it easier to come back to some day.

Session Buddy saves your links in lists, which you can glance through without having to restore the actual windows. It also saves your most recent session in case the power goes out or your browser crashes. That's all I want. I don't want it to close tabs for me or take over my bookmarks or replicate itself to the cloud.

I like going back and reviewing the browser tabs I've had open in recent days, to see if there are any interesting little nuggets I had forgotten about.

Hey, there's one right there.

Aren't these just the coolest glass buttons, from CodePen? The pictures behind the buttons are something you can change on the fly. For example, I went over to UnSplash.com and found a photo of a red rose, and pasted in the URL, and POOF! -- the rose showed up inside the red button. So you could make buttons of your kids faces. They also have hover effects. I might use them for something.

I would not have remembered those glass buttons if Session Buddy hadn't hung onto them for me.

If I really want to hold onto a site permanently, what I do is paste the URL into Evernote and jot down as many descriptive words as I can can think of so it will turn up when I search for it years later, like "24-hour late night restaurants coffee shop insomnia all night wifi."

I hope you like Session Buddy, and, as always, consider throwing the developers a few bucks if you find it useful. And if you DON'T like it, just click the Chrome "menu" (3 tiny dots) at top right, choose More Tools > Extensions > Session Buddy > Trash Can, and it will go away (...poof).

Happy browsing!

We can put a man on the moon, but we can't seem to make it easy to align images in blog posts. Any time we get something that actually works, like the friendly <center> tag, it is snatched away by the purists who say it's unsemantic. Have they even looked at Bootstrap? Talk about unsemantic. But I digress.

The purpose of this post is to demonstrate various ways you can align your images in a Ghost blog post. Nothing fancy, just good, old-fashioned HTML, which Ghost handles beautifully. Personally, I don't see any good reason to learn the "markdown" way when HTML works fine, and will be around much longer than markdown.

When using the HTML <img> tag, what I do is upload my photo by clicking the little icon with the moutains and moon at the bottom of the Ghost editor. (See my first example, it was created that way.) That gives you a basic image aligned to the left, which nobody likes. So I copy the URL out of the markdown into an <img> tag, and delete the detritus. Not sayin' it's right, that's just how I do it.

So without further ado, here are some simple ways to align your images. I will put the code first, in the same order as the apples... you can figure it out.

![apple-1](/content/images/2018/03/apple.png)

<img src="/content/images/2018/03/apple.png" alt="apple" style="float:right; margin:1em;">

<img src="/content/images/2018/03/apple.png" alt="apple" style="float:left; margin:1em;">

<div style="text-align:center"><img src="/content/images/2018/03/apple.png" alt="apple" style="margin-bottom:1em; border:4px dotted lime"></div>

<figure style="text-align:center; margin:1em"><img src="/content/images/2018/03/apple.png" alt="apple"><figcaption style="font-size:smaller;">I am an apple with a caption!</figcaption></figure>

<img src="/content/images/2018/03/apple.png" alt="apple" style="position:absolute">

<img src="/content/images/2018/03/apple.png" alt="apple" width="20%" style="float:right"><img src="/content/images/2018/03/apple.png" alt="apple" width="15%" style="float:right"><img src="/content/images/2018/03/apple.png" alt="apple" width="10%" style="float:right"><img src="/content/images/2018/03/apple.png" alt="apple" width="5%" style="float:right">

Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla.

Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla.

Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla.

Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla.

Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla.

Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla.

Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla.

Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla.

Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla.

Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla.

Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla.

Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla.

Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla.

Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla.

Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla.

Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla.

Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla.

My first programming class was in the Ruby language. At the time, Ruby on Rails was a big player in the "full stack" world, so it seemed like a good idea to climb onto that bandwagon. The class was challenging and fun. If anyone reading this is interested in learning Ruby, you can get a huge head start just by reading the free introductory materials and doing the pre-class exercises at Launchschool.com.

Anyway, one of my assignments was to write a blackjack game. That was four years ago, mind you, so I was recently surprised to discover that my game is still up and running on trusty Heroku.com, so you can play it, too. Woo hoo! There might be a five second delay before the page loads -- that's how Horoku punishes you for not being a paying customer, which is fair enough.

It's strange to find something that you made and forgot about still "living" perpetually on the web, like reading a diary entry about events you don't remember, or coming across a video of yourself speaking a language you don't speak anymore.

I love my tiny playing cards, how they look grimy and bent. No, I didn't make them. I found them on this useful website that everyone should know, openclipart.org. It has free, public-domain clip-art that you can help yourself to, and use for any purpose. And it's well organized, too.

After I found those cards, I was faced with the prospect of downloading 52 of them to make my deck, and that motivated me to write a "web scraper". That's a program that searches the web for something and downloads it for you. It was the first time I felt like a real programmer, because -- surprise! -- it actually worked. That's a pretty rare occurrence when you're a beginner.

My scraper looked like this:

require 'mechanize'
a = Mechanize.new
a.agent.http.verify_mode = OpenSSL::SSL::VERIFY_NONE
page = a.get 'https://openclipart.org/search/?query=ornamental+deck&page=2'
url_list = []
page.links_with(:href => /ornamental-deck/).each do |link|
  url_list << link.href
end
url_list.uniq!
url_list.each do |card_url|
  card_page = a.get card_url
  card_page.links_with(:href => /\/2400px\//).each do |link|
    fullname = link.href.split('/').last
    shortname = fullname.sub('nicubunu_Ornamental_deck_','').downcase
    download_page = link.click
    a.get(download_page.uri).save_as "images/cards2/#{shortname}"
  end
end

LOL, when I first pasted that code into this post, it made a big mess. You see, this blog uses a Markdown editor, and Markdown uses "#" pound signs for formatting your headings, while the Ruby language uses "#" pound signs for making comments.

"No problem," I thought, "I will simply wrap my code in <code> and <pre> tags. That should neutralize those pesky octothorpes." It looked like it was working, so I continued on my way. But later, when I "published," eek, it looked like this:

Sigh.

Why is nothing ever easy?

Just escape it, you say.

A brief detour into the world of HTML character entities.

I am writing this blog for self-taught coders who often have giant gaps in their education, like me, so feel free to skip this section if you know what I am talking about.

HTML character entities (a.k.a. "named character references," "reserved symbols," "numeric character references," "escape codes") are special codes that you can use to represent certain symbols that might have different meanings in different contexts.

The most common example is the less-than and greater-than signs that HTML uses for everything. For example, take a look at this boring sentence.

The <center> tag, along with <menu> and <strike> have been deprecated.

What I actually typed was:

I had to type it that way, because otherwise, it would have looked like this:

Do you see why? The browser interprets HTML code as HTML code! Who knew?

The escape from this problem (ha ha) is to "escape" your symbols, which means replace them with secret-code equivalents that tell the browser, "make it LOOK like a less-than sign but don't INTERPRET it as a less-than sign."

So, I thought, I simply need to look up the escape code for the "#" sign, and replace all my #'s with that code. And I was right about that. But I was wrong about something else. I'd never really deep-dived into escape codes before, so I had a vague and incorrect, suspicion that replacing "#" with "#" in my code would mean that anyone who copied my code would end up with a bunch of "#"'s instead of "#" signs in their code.

Nobody would want my scraper code, of course, but someone who happens to be taking a Ruby course and has to write a blackjack game might actually want to copy my blackjack code (for learning purposes, of course). And how ugly would my comments look if they were all preceded with "#" ?

Like I said, I was WRONG about that suspicion. If you copy text that contains character codes from a browser, you actually get the real thing, not the code! Kind of weird, huh?

But I didn't go in that direction because, in addition to the above misconception, I was thrown off by this post on Stack Overflow, in which three people responded to someone with my exact question by saying, basically, "don't be stupid, the pound sign isn't a reserved character in HTML so there is no character entity for it."

Now, if I had kept reading, I would have seen a later comment that said, "Markdown interprets # as 'headers', so you need to use #1" and that would have saved my day, but I didn't.

Instead, I thought, "@#*&%! I CAN'T BE THE ONLY PERSON IN THE HISTORY OF THE WORLD WHO WANTS TO PASTE SOME RUBY CODE INTO A MARKDOWN EDITOR! WHERE DO I GET A SYNTAX HIGHLIGHTER AND HOW DO I INSTALL IT?"

Which leads us to the topic at hand: SYNTAX HIGHLIGHTING

How DO other people get their code to look so nice?

If you start out programming in Notepad, as many of us do, there will come a moment when your mind is blown by a professional code editor, like Sublime Text, for example.

Wowzer! Look how everything is neatly lined up and color coded. Even a person who knows nothing about computers could change the words to that song, or make the beer disappear by twos or by fives. Seriously, how does it know what's a variable and what's a function and what's an operator?

Notepad++ is another great code editor, and it's free. Notice the lines connecting each opening <div> to its closing </div>. When I click on one element, it highlights its partner, even if it is on the other side of the room. How sweet is that?

Alas, when you copy that colorful code out of your editor and paste it into a web page, or into Microsoft Word, or wherever you keep your notes, it looks terrible, or at least boring, like my "scraper" code did above.

The solution, for web pages, is to use a syntax highlighter. And after snooping around a bit, it looks like Prism.js is the code formatter du jour. Why? Because it's easy, free, and it speaks dozens of languages. Oh, and you can link to it via a CDN so you don't even have to download it.

How to use Prism.js

OK, we want the pretty colors, so how do we get them into our blog pages?

Here's the easiest way:

Paste this line of code BEFORE the ugly code you want to format. It will load the Prism.js CSS style sheet.

<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.12.2/themes/prism.min.css" rel="stylesheet" />  

Then, paste this line AFTER the ugly code you want to format. It will load the actual Prism.js javascript file:

 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.12.2/prism.min.js"> </script>

That's it!

Now you just need to learn how to tell Prism.js what to format, and what language to format it in. By default, Prism can format HTML, CSS, and Javascript. So let's do a little test.

<!-- I am HTML -->
<h4>I am a heading</h4>
<p>I am a paragraph with <em>emphasized</em>text</p>

/* I am CSS */
h2, h3, h4 {
    color:blanchedalmond;
    background-color:cornflowerblue
    }

//I am javascript
$('body').on('mouseleave', '.popover', function () {
				$('.popover').popover('hide');
			})

#I am ruby, but I am not being formatted :-(
array_of_cards.each do |c|
        #cards are in string format, e.g. "jack_of_diamonds"
        face = c.split('_',0)[0]

You should be seeing some different colors. And you might have noticed how it correctly identifies how comments are formatted in each language.

Wait? How did Prism know what language I was speaking in each of those examples?

This is how.

You should wrap your code in <pre> and <code> tags, in that order, and then add a class called "language" to the <code> tag, like this:

<pre>
<code class="language-javascript">
//This is my javascript code 
</code>
</pre>

Obviously, you would change the "language-javascript" to "language-css" or "language-html" or "language-fortran".

Even simpler, if you are using a Markdown editor, you can use back ticks, like this:

```css
#pretty-code {
  color: pink; 
  font-style: 'gum drop';
  }
```

Get it?

As you have probably noticed, I am playing around with the colors right now. I'll explain how to do that, too.

But first, what about poor Ruby? She needs some formatting, too.

Adding other languages to Prism

By default, Prism will format Javascript, CSS, and HTML. If you want other languages, you'll have to load them yourself. But it's easy.

Here's how to add syntax highlighting for Ruby.

Copy the following line, and paste it AFTER the javascript line that we pasted before, at the bottom of your file.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.12.2/components/prism-ruby.min.js"></script> 

Now we can add class="language-ruby" to our code tags. See my blackjack game below for an example.

But what if you want Java or Python or LOLCode?

Here's the lazy way to add more languages. Examine that string I just gave you and look for the word "ruby". All you need to do is change the word "ruby" to any of the other languages available.

Once you have it working, you should ask yourself: will I frequently need to format code? If so, you should add the lines I gave you to your default.hbs file (that's the file in your ghost theme that holds the stuff you always want to load). Either edit the file directly, or go into your admin module in Ghost and add them via the "Code Injection" section of the Admin panel. Obviously, you want to put the .css file in the header, and the .js files in the footer.

If the answer is "no," you could actually do it the way we discussed, by simply pasting the lines immediately above and below your code, right inside your blog post.

(Note: if you have trouble getting that to work in Ghost, make sure your script tags are aligned to the left with NO spaces or tabs in front of them, and make sure that all URLs start with https:// not plain // or http:// without the s. Also: I am working on a self-hosting Ghost blog. I have no idea if they block scripts on a hosted version of Ghost... let me know in the comments).

This strategy has the added benefit that you only load the syntax highlighter when someone is actually viewing a post that contains code, instead of everywhere and all the time.

If you are one of those people who likes to collect everything, yes, you could go to the Prism website and create a massive file that will format all possible languages. But we should resist that impulse. Just load the modules you actually need when you need them. That's the beauty of the Prism approach to code formatting.

On the other hand, if you are one of those people who likes to try out different color schemes and create your own color combinations, I give you permission to do that, but ONLY if you promise not to spend more than an hour or two on it. That sort of thing can be addictive. But here's how you would do that.

How to customize your color scheme

First, get Prism working with the default styles. Then look in these two places. The colors they demonstrate on their website can be found in the "themes" folder in their GitHub site. And if you want more, take a look at this prism-themes repository. They are just CSS files. Choose one that you like and download it to your assets/css folder, then link to it in your default.hbs file, right AFTER the default Prism css file. Remember that in Ghost, you need to use the "asset helper." My link looks like this:

<link rel="stylesheet" type="text/css" href="{{asset 'css/prism-ghcolors.css'}}"/>

Once you have that working, open it in a code editor and go to town changing the colors around. I love the CSS color names, like PapayaWhip and DodgerBlue. I'm using a creamy "FloralWhite" for my background, and isn't it so much nicer than regular white? You don't have to limit yourself to named colors. Here's a nicely arranged list of 500 colors. If a color doesn't have an official css name, you can use the hex code.

Final considerations

Here are a few more technical notes before I actually paste my Ruby blackjack code below.

• Whenever you are loading javascript files, it's a good idea to press F12 on your Chrome or Firefox browser and look at the Console. You might see errors about the files being blocked. Chrome will reject them, for example, if your links don't start start with https://. Pay attention to the "s" which stands for "super secure."
• If you are reading this in the future (Hi, Future!), you will want to change the version number in all those links I gave you to the current version. The version I have installed is 1.12.2. Just during the week I was messing with this stuff, it went from 1.11.0 to 1.12.0 to 1.12.2. The way to find the most current version is go to this page and click the version dropdown at the top of the page. Luckily, they keep the old versions around, so if everything is working nicely, there's no need to upgrade. You will see the version number in the URL of all the links I gave you. Just make sure they are all the same.
• We are using the CDN ("content delivery network") version of the PRISM files. That means we are calling them from a distant web server rather than serving them up from our own web server. Personally, I have grown to prefer that method because:
1. It makes it easier to update to newer versions of the program (just edit the links)
2. It is fast because your browser only makes the call once, and then caches the files. Also because CDN owners buy faster servers than you do.
3. You can easily change your mind and try out different things. A better syntax highlighter might show up tomorrow, and we might want to check it out
4. Most importantly, it doesn't really MATTER to me if the CDN link were to fail one day and I suddenly didn't have syntax highlighting on my blog. It's not of vital importance. If it were, then I would definitely want to download the files and serve them up from my own server. It's all just text files, after all.

Useful links

Here are some useful links:

1. Prismjs website: https://prismjs.com/
2. List of all the languages available: https://prismjs.com/#languages-list
3. Prism Github site where you can play with color schemes: https://github.com/PrismJS.
4. CDN links. This is where you will find all of the links you might need to load Prism and its many accessoiries. https://cdnjs.com/libraries/prism

OK, without further ado, here is the hopefully prettified code to my brilliant blackjack game, followed by a decorative rooster.

#BLACKJACK by Mary Dean
#working game located at 
#https://marydean-blackjack.herokuapp.com

#main.rb
require 'rubygems'
require 'sinatra'
require 'pry'

#removed this line due to possible conflict with chrome
#set :sessions, true
#and added this line. 
use Rack::Session::Cookie, :key => 'rack.session',
                            :path => '/',
                            :secret => 'some_random_string'

#these lines are for me to test over home network
set :environment, :production
#set :bind, 'IP ADDRESS'

helpers do

    def value_of_hand(array_of_cards)
      faces = {"ace" =>11,
               "2" => 2,
               "3" => 3,
               "4" => 4,
               "5" => 5,
               "6" => 6,
               "7" => 7,
               "8" => 8,
               "9" => 9,
               "10" => 10,
               "jack" => 10,
               "queen" => 10,
               "king" => 10
      }
      total_value = 0
      num_aces = 0
      array_of_cards.each do |c|
        #cards are in string format, e.g. "jack_of_diamonds"
        face = c.split('_',0)[0]

        value = faces[face]

        total_value += value

        num_aces += 1 if face == 'ace'

      end
      #correct for Aces -- BORROWED THIS LOGIC FROM TEACHER'S CODE
      num_aces.times do
        total_value -= 10 if total_value > 21
      end

      return total_value
    end #end value_of_hand

    def decrease_kitty_by(amount)
      old_kitty = session[:kitty].to_i
      new_kitty = old_kitty - amount
      session[:kitty] = new_kitty.to_s
      if new_kitty <= 0 @error="You have run out of money, please put more money in your kitty" end def increase_kitty_by(amount) old_kitty="session[:kitty].to_i" new_kitty="old_kitty" + amount session[:kitty]="new_kitty.to_s" check_kitty kitty="session[:kitty].to_i" bet="session[:current_bet].to_i" if < redirect " game overdraft" set_helpful_message(type) #after extracting all these i think it was a mistake because now the #lookups will be done even they aren't needed player_value="value_of_hand(session[:player_cards]).to_s" dealer_value="value_of_hand(session[:dealer_cards]).to_s" bet_value="session[:current_bet]" name_value="session[:player_name]" message="case" type when 'continue_player_hand' "
Your cards add up to: #{player_value} What would you like to do?"
        when 'player_went_over'
          "
Drat!
Too bad! With #{player_value} you have busted, #{name_value}. I hope you will play again"
        when 'player_stays'
          "
Player stays
You have chosen to stay with #{player_value}. Now it's the dealer's turn."
        when 'dealer_must_hit'
          "The dealer must hit..."
        when 'dealer_went_over'
          "
Yahoo!
 The dealer went over! You win #{bet_value} chips!"
        when 'player_blackjack'
          "
Awesome! #{name_value} got a BLACKJACK!
 You win #{(session[:current_bet].to_i * 2).to_s} chips!"
        when 'dealer_blackjack'
          "
Dealer Blackjack :-( 
Too bad, #{name_value}, the dealer got a blackjack. You lose #{bet_value} chips"
        when 'dealer_wins'
          "
Darn!
 The dealer's #{dealer_value} beats your #{player_value}. You lose #{bet_value} chips"
        when 'player_wins'
          "
You win!
 Congratulations, #{name_value}, you won #{bet_value} chips!"
        when 'its_a_tie'
          "
Tie game
You both have #{dealer_value}, so looks like we have a TIE! Let's play again."
      end #end of case
    session[:helpful_message]=message
    message
  end #of def

end #of helpers

#WELCOME
#I wanted to serve a static page but couldn't figure out how
get '/' do
  erb :index, :layout => :layout_plain
end

#GET and SUBMIT USER NAME
get '/set_name' do
  erb :set_name, :layout => :layout_plain
end

#SET NAME, KITTY, AND INITIAL BET
post '/set_name' do
  session[:player_name] = params[:player_name]
  session[:kitty] = params[:kitty]
  session[:current_bet] = params[:current_bet]

  check_kitty
  redirect "/game"
end

##CREATE DECK OF CARDS AND DEAL 2 CARDS TO EACH
#ALSO SET SHOW/HIDE VARIABLES
get '/game' do
  @show_dealer_first_card = false
  @show_hit_stay_buttons = true
  @show_dealer_turn_button = false
  @dealer_blackjack = false
  @player_blackjack = false
  session[:dealer_cards] = []
  session[:player_cards] = []
  #I WANT TO RE-USE DECK FOR CARD COUNTING SO ONLY CREATE NEW DECK IF NEEDED
  if session[:deck].nil? || session[:deck].size < 10
   suits = ["hearts", "clubs", "spades", "diamonds"]
      faces = ["ace", "2", "3", "4", "5", "6", "7", "8", "9", "10","jack","queen","king"]
      deck = []
      cards= faces.each do |s|
        suits.each do |f|
          card = "#{s}_of_#{f}"
          deck.push(card)
        end
      end
   deck.shuffle!
   session[:deck] = deck
   end
  session[:player_cards] = [session[:deck].pop, session[:deck].pop]
  session[:dealer_cards] = [session[:deck].pop, session[:deck].pop]
  if value_of_hand(session[:player_cards])== 21
    @player_blackjack = true
    @show_hit_stay_buttons = false
    @show_play_again_button = true
    increase_kitty_by(session[:current_bet].to_i * 2)
    set_helpful_message('player_blackjack')
    else
    set_helpful_message('continue_player_hand')
    end
  erb :game
end

post '/game/player/hit' do
  session[:player_cards] << session[:deck].pop
  if value_of_hand(session[:player_cards])>21
    set_helpful_message('player_went_over')
    decrease_kitty_by(session[:current_bet].to_i)
    @show_hit_stay_buttons = false
    @show_dealer_turn_button = false
    @show_play_again_button = true
    @show_dealer_first_card = false
    erb :game
  else
    @show_hit_stay_buttons = true
    @show_dealer_turn_button = false
    @show_play_again_button = false
    @show_dealer_first_card = false
    set_helpful_message('continue_player_hand')
  end
  erb :game
end

post '/game/player/stay' do
  set_helpful_message('player_stays')
  #@success = "You have chosen to stay with #{value_of_hand(session[:player_cards])}"
  @show_hit_stay_buttons = false
  @show_dealer_turn_button = true
  @show_dealer_first_card = false
  erb :game
end

get '/game/dealer' do
  @show_hit_stay_buttons = false
  dealer_value = value_of_hand(session[:dealer_cards])
  player_value = value_of_hand(session[:player_cards])
  if dealer_value == 21 && session[:dealer_cards].size == 2
    set_helpful_message('dealer_blackjack')
    decrease_kitty_by(session[:current_bet].to_i)
    @show_play_again_button = true
  elsif dealer_value > 21
    set_helpful_message('dealer_went_over')
    @show_play_again_button = true
    increase_kitty_by(session[:current_bet].to_i)
  elsif dealer_value < 17
    set_helpful_message('dealer_must_hit')
    redirect '/game/dealer/hit'
  elsif dealer_value >= 17
    if dealer_value > player_value
      set_helpful_message('dealer_wins')
      @show_play_again_button = true
      decrease_kitty_by(session[:current_bet].to_i)
    elsif dealer_value < player_value
      set_helpful_message('player_wins')
      increase_kitty_by(session[:current_bet].to_i)
      @show_play_again_button = true
    elsif dealer_value == player_value
      set_helpful_message('its_a_tie')
      @show_play_again_button = true
    end
  end
  @show_dealer_first_card = true
  erb :game
end

get '/game/dealer/hit' do
  session[:dealer_cards] << session[:deck].pop
  redirect '/game/dealer'
end

get '/game/overdraft' do
  erb :overdraft
end

get '/game/player/set_new_bet' do
  erb :new_bet
end

post '/game/player/set_new_bet' do
  current_kitty = session[:kitty].to_i
  new_amount = params[:add_to_kitty].to_i
  total = current_kitty + new_amount
  session[:kitty] = total.to_s
  session[:current_bet] = params[:current_bet]
  check_kitty
  redirect '/game'
end

get '/profile' do
  "Edit your profile here"
end

get '/cash_out' do
  "Here are your big winnings!"
end

Once I figured out how to use them, I fell in love with counters.

You can add incrementing numbers to anything. They make you look more polished and organized than you actually are. It's cool how they just work.

My first counter was a figure counter. I wanted to learn how to add captions to my photos, so I learned about the <figure> tag, which happens to come equipped with the handy <figcaption> tag. That means your photos and their captions can always stay together. Like this:

<figure>
<img src="/content/images/2018/03/WorstPoliceSketchEver.jpg">
    <figcaption>The Worst Police Sketch Ever</figcaption>
</figure>

(Using <figure> is also a good way to center your photos, which is often harder than it should be. We will do that in our CSS below. Also... you DO know that you can enter HTML directly into a post in your Ghost blog, don't you? You can't do that in most other blogging platforms.)

Naturally, adding a beautiful caption like that made me wonder, "Hmm, could I also number my captions, like they do in school textbooks? I want it to say, "Figure 1: The Worst Police Sketch Ever". Then the next one should say, "Figure 2..." and so on.

Obviously, I could just write the words, "Figure 1," and "Figure 2," into my figcaptions, but why not let the computer do that work for me? After all, it is inevitable that I will eventually want to squeeze "Figure 1b" between figures 1 and 2, and then I will realize I need to re-number everything, and you know how that goes.

Luckily, it's pretty easy. My HTML will stay exactly the same. What I am going to do is add a "counter" to my CSS style sheet, and then take that counter and prefix it to every <figcaption> that happens to come along. If you want the same effect on your blog, you can simply copy and paste my CSS code, shown below. The end result will look like this:

The only real mental work you need to do is to think: "When do I want my counter to start back at 1 again?"

In my case, that's not a hard question. Each one of my blog posts is a separate document. And I don't forsee a time when I would have a single post that contained multiple "chapters," so to speak, so I am fine with my figures starting at "Fig 1" and continuing until... whenever. When I create a new post, the numbering should start back at 1 again. Perfect.

What does every HTML document have exactly one of? A <body> tag, of course. So I can simply tell my counter to start from zero every time it encounters a <body> tag.

Later, when I create footnotes, I will do exactly the same thing. The first footnote in any post should be footnote number 1, right? And they should continue incrementing from there. So, conveniently, the <body> tag can serve as the clue that tells BOTH counters to start over.

Just to be clear... we could use any tag. If you were a lawyer, for example, you could make every paragraph numbered, and reset the numbering at every section. Or if you are writing a research paper, you could attach outline-style numbering to your <h1> and <h2> tags, so that your <h2> counter is reset every time there's a new <h1>, and so forth. Google "css counter" if you want to get fancy.

Here's my CSS for a really basic figure which centers the photo (or table, or graph, or whatever), then centers a caption under it, then numbers the captions, starting at 1. Copy this into your CSS (or simply include it between <style> tags in your HTML), and every time you use the <figcaption> tag you will get automatic numbering.

/* -----------------------------------------------*/
/* MARY'S CENTERED FIGURES WITH NUMBERED CAPTIONS */
/* -----------------------------------------------*/
body {
	counter-reset: my-fig-counter 0;
}
figure {
	text-align: center;
}
figcaption {
	font-size:smaller;
}
figcaption:before {
	counter-increment: my-fig-counter 1; 
	content: "Fig. " counter(my-fig-counter, decimal) " - "; 
}

I'm sure you can figure out what everything means, but here's the rundown:

• counter-reset means "set the counter back to zero" when you encounter a new body tag.
• counter-increment means "increment the counter by this much".
• :before means, "prefix any figcaption with the following content".
• decimal means use regular numbers, not Roman numerals or any of the other format choices (which you can google yourself).
• And, obviously, you can change the word "Fig" to "Figure" or "Illustration" or "Example" or anything else you want.

Ta-da, an automatically incrementally numbered figure.

So what's the trick? You said there was a trick!

Now, pay attention.

As you have hopefully discovered, I later decided to create some awesome, hoverable footnotes, which also use counters. I will show you how I did that in another post, but basically, I used the same method of resetting the numbering for every new HTML "body."

A week later, I realized that my figures were no longer incrementing -- every single one was labeled "Figure 1" -- and I spent a good two hours trying to figure out what I had broken.

This is what I had done WRONGLY.

body {
	counter-reset: my-fig-counter 0;
	counter-reset: my-footnote-counter 0;
}

Which is the same as doing this:

body {counter-reset: my-fig-counter 0;}
body {counter-reset: my-footnote-counter 0;}

The problem with doing things that way -- and I did not find this documented anywhere that was easy to find -- is that, apparently, you can only have ONE counter-reset statement attached to a particular tag. (Or maybe only one counter-reset period. I did not test that.)

In any event, the RIGHT, CORRECT way to reset your counters is like this:

body {
    counter-reset: my-fig-counter 0 my-footnote-counter 0;
}

Notice that there are only spaces separating those items, no punctuation.

That's a little bit annoying because I like to keep my css code grouped together. Anything that applies to figures should be in one place, in my opinion, and anything related to footnotes should be in another, but when it comes to counter-resets, they need to stay together in one single statement.

Got it?

I hope this helps someone who has run into the same issue, when they find out that all 20 of their figures are labeled "Figure 1." When you think your CSS counter increment is not working, it might NOT be your counter-increment, but rather your counter-reset being wiped out by another counter-reset.

Cheers! Now go forth and number your figures.

As you wander the web, you might notice that many people have a cute little photo associated with their name. For example, when I login to GitHub, Codepen, DigitalOcean, or many other sites, a mini-me magically appears.

If I write a comment, there I am again.

Where does mini-me come from? How could multiple companies all possess the same image of me? Are they secretly owned by one giant mega-corporation that tracks me everywhere I go?

Luckily, no. A gravatar is a "globally recognized avatar" and you create it yourself. You register it at Gravatar.com, associate it with an email address, and voila. If you don't have one yet, let's make one, and learn some stuff along the way.

Make your own gravatar

Find a nice picture of yourself. How nice? As nice as 2048-pixels square, that's how. They recently increased the allowable image size so people can inspect your nose hairs on their IPhones, but since your gravatar will usually be seen as an 80-pixel square, you don't need anything that huge.

Striking the right attitude is what counts. We don't want to see a blurry face cut out of your Thanksgiving dinner snapshot. Put some thought into it, Mon!

Here are some random examples of gravatars.

Personally, I like to see real people rather than cartoons or animals. My first programming class was an online program that lasted several months. I spent a lot of time interacting with the instructor -- hearing his voice during the live sessions, getting his feedback on my homework, "chatting" in the forums -- and it always felt weird and alienating that I never once saw what he looked like. I didn't want to stalk him, mind you, just to see if his face matched his voice... just see what he looked like, in a normal, human way for goodness sake.

(It was called Tealeaf Academy, now called LaunchSchool. Excellent program if you're interested in learning Ruby. I notice they still have no names or photos of the instructors. Maybe they're hideously deformed creatures, or FBI most wanteds. See what happens when you don't include a real photo in your gravatar? People think things.)

For my own gravatar, I chose to put a picture of me on the back of a pony when I was three. Why? Because I don't have any good pictures of my adult self, but more importantly, so that when people read my posts and comments, they will think, "Wow, what a smart 3-year old!" and hopefully won't say anything mean.

As you have probably surmised, your photo must be SQUARE. So crop it into a square shape. If I showed you how to do that, I would have to start ranting about how Windows Paint has been stripped of basic features like "constrain a selection to a square shape" that it had 20 years ago, so I won't. You'll just have to open Paint, use the selection tool, eyeball the little pixel counters at the bottom of the screen, and try to stop your jittery fingers precisely when the width is the same as the height.

Got it! Now click "Crop," and save your image. Then go to this website and create a gravatar account:

https://en.gravatar.com/

"But wait!" you say. "It says I have to login into my Wordpress account! I neither have nor want a Wordpress account."

I know, neither did I. It seems that Gravatar is a subsidiary of Wordpress. Don't worry, though, they won't force you to create a virus-laden, ad-ridden blog. They will just ask you to enter your email address and to upload an image, and then you'll never have to go back unless you want to change one of those two things.

As I was writing this, I was happy to discover that you can add multiple email addresses and images to your Gravatar account. So I decided to create a separate gravatar for my (er, future) business name, Casa 14 Studios. I entered my business email address and uploaded my tortuously-produced logo (it's a casa with a 14 in it, in case you can't tell). At first I thought it looked fine:

But then I ventured over to a couple of other websites where I use my business email, and, oh no! Ugly gravatar alert!

Yuk. It seems that some websites roundify your gravatar. And where is that orange dot coming from? And why is the other one all squished to the top? I don't know. But now I do know the second rule of gravatars:

Not only must your gravatar be SQUARE, it must also look good as a CIRCLE.

Back to the logo drawing board.

How do gravatars work?

You might be wondering, how does some random website "fetch" my gravatar? I was wondering that, too, so I took a look at their Developer Resources. Here's how they do it.

You go to a website and create an account, using your email address. They take that email address and "hash" it -- which means "turn it into secret code" -- using an algorithm called "MD5," which, since my name is Mary Dean, I assume was named after me.

To see how easy it is to turn your email address into an MD5 hash, hop over to this website, type your email address into the box, and press the button. While you are there, copy that hash into your clipboard.

https://www.md5hashgenerator.com/

It will look something like this:

6fdbb18ef3ab9304260e516530d57754

With that long string of text, you, or anyone, can fetch your gravatar. Just type the following into a web browser, replacing my hash with your hash.

https://gravatar.com/avatar/6fdbb18ef3ab9304260e516530d57754

Press enter, and instantly you should see your 80-pixel face... or your dog's face, or whatever image you used for your gravatar.

OK, so at first I was thinking, "I shouldn't show my actual email "hash" to my readers. That's private!" But then I realized... anyone who sees anyone's gravatar on any page can simply look at the page source (right-click, View Page Source) and see that person's hashed email address.

Indeed, this is what I am seeing under the hood:

If you click on that URL you will see a larger mini-me. Why is it larger? Note the   ?s=512   at the end of the URL. That means "give it to me in a size of 512 pixels."

What we just did is called "making an HTTP request to the gravatar.com API" or simply "making a call to the gravatar API."

API ("application programming interface") is one of those scary terms that you can be totally intimidated by until you realize it just means, "the format in which you must send your request in order to get something back." It's like those complicated rebate forms we used to have to fill out to get $20 back from the purchase of a laser printer. "Complete and sign the enclosed form. Send it along with with the UPC symbol cut from the bottom of the box, and the original register receipt with the printer purchase highlight

Cool, huh?

Here is a Codepen that will accept your email address, hash it, and return your gravatar, just like we did. You can use it right here on my page. You could also examine the javascript to see how he generates the hash.

See the Pen Gravatar Checker (MD5.js Test) by Sam Dennon (@SamEureka) on CodePen.

Is it "safe" to have a gravatar?

The thing that surprised me on this little excursion to hash-land is that I always thought "security" meant that secret codes were produced on the fly. If anyone ends up with the same hash from the same email address, it can't be that hard to reverse engineer. That's called a handshake.

Your email address is a unique identifier, meaning nobody else on the internet has that same email address. The "hashed" version of your email address is likewise unique. Try googling your hash. When I google mine, it turns up a comment I made on a Code Academy website back in 2014.

Any website that uses gravatars already stores your email address in the hashed format. So, not using a gravatar doesn't protect your hash from being associated with you in the event a website is hacked, or, just as likely, sloppily designed. It would be possible for someone to consolidate all the brilliant things I have said on Stack Overflow, Code Academy, Codepen, Github, Wordpress, and wherever, by tracking my hash, so to speak.

But (a.) so what? Most of my participation in these sites has been related to trying to learn how to solve various programming issues. Not highly sensitive stuff.

And (b.) you could easily prevent that kind of tracking by using a different email address and different gravatar at each different site that you participate in. But the whole point of having a "globally recognized avatar" is to unify, rather than fracture, your existence, isn't it?

So here's the recommendation:

1. At a bare minimum, you should have two different email addresses for your personal and public stuff. Your gravatar is your public face. Don't use your personal email address for it.

2. It's also a good idea to have a third email address for any use that is likely to put you on a mailing list. That way, your discount coupon from Kohls and your daily news briefing from the New York Times don't get mixed in with your sister's happy birthday message, or news about your cousin's chemotherapy.

3. If you register on a "highly sensitive" website, where you would be really horrified to have anything you say tracked back to you, you should use an email address that you ONLY use for that site.

And here's a good trick for that. When you have a gmail account, you actually have an infinite number of email addresses. Why? Because you can add a period to the first part of your email address:

fuzzywuzzy@gmail.com = fuzzy.wuzzy@gmail.com

And/or you can add a plus sign and anything else to the end of your email address:

fuzzywuzzy+todo@gmail.com
fuzzywuzzy+business@gmail.com
fuzzywuzzy+twitter@gmail.com
fuzzywuzzy+junkmail@gmail.com

All of those "different" emails will (a.) produce different hashes (b.) still be delivered to your gmail account. So you could set up filters, causing all of your +todo items go into a folder and everything from +junkmail to go into the trash. Here's an article about doing that sort of thing: https://fieldguide.gizmodo.com/how-to-use-the-infinite-number-of-email-addresses-gmail-1609458192

I think that's a very good idea whenever you sign up for something "iffy." Add a tag to the end of your email address when you sign up for something, like:

fuzzywuzzy+visatraveloffer@gmail.com

Later, when you are flooded with spam, you will know exactly where it came from and you can use that unique address to filter it right into the trash.

(None of that addresses the issue that Google scans all free email accounts to mine marketing information, so there goes your privacy anyway. It's still a good idea for junk mailing lists, but I'm a big believer in paying for your personal/private email accounts.

If you want to read an in-depth discussion of gravatars and privacy, see here.

And if you want to look into using and filtering multiple gmail addresses for different purposes, see here.

Meanwhile, I hope you enjoy seeing your gravatar pop up in unexpected places, and I urge you to participate, not just lurk, in the various communities that are out there to help you learn and create.