Try Making Your Blog More User Friendly and See What You Run Up Against :)

For those who like to use the search box, I wanted to make it possible to press the '/' key and get the cursor there, just like Google's done for their page. But:

Your current search box is generated inside a closed shadow DOM, probably by Google Custom Search, so:

• 🧱 It cannot be focused or scripted from outside

• ✅ Use Blogger's native widget or roll your own

Fixing the Crappy HTML Blogger Maintains - Thank You FreeFormatter!

You enter stuff into your blog in the Compose view and then, you want to add a tooltip, so you switch to the HTML view. Yuck! That's right, it's a mess.

It's https://www.freeformatter.com/html-formatter.html to the rescue.

How can you get $10,000 for free? Easy, buy a Lexus, let it get stolen and then buy it back when the insurance company auctions it. From Quora : 

This actually happened to my father. His Lexus was stolen right out from his carport. Not sure if he left the keys in it or how it got taken. He reported it as stolen to the police and turned it in to the insurance company. After two weeks or so when the car never turned up the insurance paid him for the car. Another week goes by and he gets a call from the police saying they had found his car parked in two towns over in the middle of town. There was not one scratch on it and not a lot of miles put on it either. So now the insurance owns the car and they put it up for auction. My dad goes to the auction and bids on his car to get it back. He won the bid with $10,000 to spare. So he drove home in his car with an extra $10,000 in his pocket.

________________________________________

Now, if you're masochistic enough to use blogger, you've noticed, that, every once in a while, you run into this problem:

I have a caption for an image, used on a blogger post, that is pretty long. The caption is not wrapping, and , as a result, the line goes way off page and the image also is not visible without horizontal scrolling. 

The solution: take control. Hack that critical td like so:

 <td class="tr-caption" style="text-align: center; white-space: normal; word-wrap: break-word; overflow-wrap: break-word; max-width: 100%;">

Eye Pogue on Your Windows PC

Wha?

You want to save your eyes - meaning, if the stuff on the monitors is too bright, you want to hit CTRL+#+c to invert colours. How?

(this is the easy part.. Open Windows Settings and *then* in the "Find a Setting" search field, you type "Color filter settings".  While you're typing, it's prompted you with what you're looking for as a drop down. Choose that. Click the selector to turn ON filters (just for now). Then, go down and change from "Grayscale" to "Inverted (reverse colors on the display)". Then, check the box to "Allow the shortcut key to .." )

Good? Excellent. Now. What do you do when your background image is dark and the page you're viewing is mostly white. If you invert one, the other monitor gives you grief.

See, I wouldn't know how to solve this if I hadn't dabbled in CSS. One solution - which is basically opening a dummy webpage whose background is black solves the problem wanting working on monitor without the filter, where the stuff is mostly dark and controlling the display on the other one-- In this case, you merely open one of your bookmarks in Chrome. Bookmark a file that has this :

<!DOCTYPE html>
<html>
 <head>
  <title>Black!!
  </title>

  <style type="text/css">
   body {
    background-color: black;
   }
  </style>
 </head>

 <body>


 </body>
</html>

Now, a quality hack (I think) would be to use AHK to launch Paint on a large image that is essentially just a black background :) How many bytes would such a file take? 50 KB believe it or not - for basically 0 info!! Or maybe about 10 bits of info..

Using a File on Your PC as the Background Image in CSS

This one's hard to find online for some reason

body {
         background-image : url("C:\path\to\file");
}

Seems right intuitively, except, it doesn't work. What does work? "file:///C:/path/to/image"

How should you know? Open the file in your browser first - and pay attention :)

Beating a Bad Web Page

As in a page whose user experience could be better :

https://www.thefreedictionary.com/words-that-start-with-wit

What, specifically? Scroll down, and you now have to scroll back up to get back to the text field. Wouldn't it be nice if that entry field was always within view no matter where in the page you went?

Enter frames - the poor man's solution :)

I want to have one frame with a text box where I can enter the prefix, and hit Go and load the result in the frame on the right. Doesn't work! Why? What's special about this website? The page sort of loads up - partially... They tell you, something's wrong..

Fortunately, I have a solution that works okay if I say open in new tab. Other, less useful pages work fine, but thefreedictionary does not.. Go figure..

I feel like I've arrived as a webeloper with that hack that selects the text in the field when you click on it :)

For your index.html :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<frameset cols="20%,80%">
<frame name="left" src="input.html" />
<frame id="right" name="right" src="http://www.wordfind.com/starts-with/tru/" />
</frameset>
</html>

And for the input.html :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<script type="text/javascript">
function process()
{
  var seturl="https://www.thefreedictionary.com/words-that-start-with-" + document.getElementById("url").value;
  window.open( seturl, '_blank');
  return false;
}
</script>
  <form  onSubmit="return process();" >
Prefix: <input onClick="this.select();" type="text" name="url" id="url"> <input type="submit" value="go">
  </form>
</body>
</html>


And, you guessed it. With my OCD, I want more - the text input field is way too small - you want to be able to click anywhere - a bigger target boosts productivity :) So, :

<input onClick="this.select();" type="text" style="height:200px; font-size:30px;" name="url" id="url">

Helps big time!!

At the end - the frames part didn't really help - in fact, it only hurts  - coz we're not using it at all..
Meaning? Use just the input.html and you'll be fine - use that for your bookmark. Now, if you have OCD like me, you want to get the focus in the input field, with the text selected when you activate the tab that this page is in.. For starters, when the page loads, you want the cursor in the text field :) And then, anytime you "return" to this tab, you want to focus in the text field, and you want all the text selected so you can replace it..

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<script type="text/javascript">
function process()
{
  var seturl="https://www.thefreedictionary.com/words-that-start-with-" + document.getElementById("url").value;
  window.open( seturl, '_blank');
  return false;
}
function onFocus(){
 document.getElementById("url").select();
};
// http://www.thefutureoftheweb.com/demo/2007-05-16-detect-browser-window-focus/
window.onfocus = onFocus;
</script>
  <form  id="wform" onSubmit="return process();" >
Prefix: <input onClick="this.select();" type="text" autofocus="autofocus" style="height:200px; font-size:30px;" name="url" id="url">
  </form>
</body>
</html>