Will Bontrager Blogs Website Techniques

The Meme Maker is a new tool. It is intended to be simple and quick to use.

I made this for myself, at first. I had wanted something where I could quickly pop an image on a page, type some text and position it, then take a screenshot.

In essence, that is what the new tool has going for it. It is a quick, low-hassle way to make a meme.

Other features include the text size change, text color change, background color change, and adjusting of the background opacity.

An advanced feature is that HTML tags can be used. Also inline CSS. Not PHP or JavaScript, though.

Because the meme text field allows HTML and CSS , there are some tricks you may wish to be alerted to. That is the reason for this article.

One caveat: Most HTML tags contain an opening tag and a closing tag, such as <b>text</b>. If you use HTML and the rest of the page suddenly looks messed up, verify your HTML tags are balanced.

The more adept you are with HTML, the more you will be able to use this advanced feature of Meme Maker.

Line breaks —

A new line can be inserted into the meme text with a keyboard enter/return key or the HTML <br> tag. If you use both, you get two line breaks.

Use line breaks to separate text or to shorten text lines.

Push lines in from left —

Type the character entity   at the beginning of the line to push text in from the left. Repeat until the indent is to your liking.

Simple font attributes —

Bold and italic text can be specified with the <b>, </b>, <i>, and </i> tags. Similar with underlining, use the <u></u> set of tags.

Or, use inline CSS to specify those font attributes.

Text change within the meme —

To change specific text color, size, background, font family, or other value within the meme, use inline CSS. Examples:

<span style="color:orange;">Yes!</span>
<span style="font-size:120%;">Yes!</span>
<span style="background-color:rgba(0,0,0,.5);">Yes!</span>
<span style="font-family:cursive;">Yes!</span>
<span style="letter-spacing:3px;">Yes!</span>

Image —

Yes, you may use the img tag to place images onto the meme image.

Video —

The video tag can be used to place videos onto the meme image.

A regular screenshot will capture only the video frame that was present when the screenshot was done. But if you have the ability to capture a screen recording, you should be able to capture a video playing on a section of the uploaded meme image.

Videos From Your Website has information about the video tag. Also the Video Embed element page.

Iframe —

Yes, you may use the iframe tag to insert content onto the meme from another URL.

Give the Meme Maker a try. Even if you have no use for memes, the tool may give you ideas what else text on images can be useful for.

(This content first appeared in Possibilities newsletter.)

When you use a browser's "View Source" menu item (generally also available with a right-click), then you get the source code of the web page.

But which source code? Here are 3 possibilities.

• The browser won't give you the raw or original source code if it includes any PHP code. To get the source code with PHP code intact, you need to have access to the server to download the file (or have the owner of the web site give the file to you).

• The browser might give you the actual source code it receives from the server. This would be the web page with PHP already having run and made any changes to the page that it has been told to do. It depends how the browser handles JavaScript-inserted content.

• The browser might present the source code that results after certain JavaScript has run.

The below script gets the actual web page source code after PHP runs but before JavaScript runs.

<?php
$URL = urldecode($_SERVER['QUERY_STRING']);
echo '<pre style="overflow:auto; white-space:pre-wrap; outline:1px solid black; padding:.5em;">';
echo htmlspecialchars(file_get_contents($URL));
echo '</pre>';
?>

No customization is necessary.

Save the file as sourcecode.php or other *.php file name. Upload the script to your server and make a note of its URL.

To use, type the script's URL into your browser, append a ? character followed by the URL of the web page you want to see the source code of. Load that page and you will see the web page's real source code.

Here is an example of what you might type into your browser's address bar. (The example assumes the script is installed at https://domain.com/sourcecode.php)

https://domain.com/sourcecode.php?https://spamfreeform.com/

The result would be the source code of the index page at the spamfreeform.com domain.

The short sourcecode.php PHP script presents the real thing, the real source code exactly like it would be delivered to a browser.

(This content first appeared in Possibilities newsletter.)

Some days ago, I was on a search for a font to substitute for Segoe UI. The substitute was desired because Segoe UI requires a license to be purchased for use on a website.

During my search, Noto Sans was mentioned most often as a substitute for Segoe UI.

Noto Sans is a variable font. A variable font is one where a single font file can provide variable aspects — like italic, condensed, and a range of font weights. Before variable fonts, a web page had to load a separate file for each font variation that was used on a web page.

Noto Sans being a variable font might account for part of its popularity over other suitable substitution fonts. Further, it seems to be a popular choice on its own merits as a primary website font.

The CSS Class Generator for Font Noto Sans tool provides formatted text and CSS code for various font aspects you can specify. It is likely to come in handy for learning about Noto Sans and for implementing it on your website.

Older desktop and laptop systems can't use the Noto Sans font's variable aspects. But Noto Sans can still be used. It's just that one or more of the variable aspects might not get rendered.

One variable aspect you'll find at the above-linked generator is the font weight:

The weight can vary from 100 to 900. Weight 400 is generally considered normal. Weight 700 is generally considered bold. With variable font weight, what you publish can be considerably lighter or heavier than normal or bold.

Another variable aspect at the generator is font width:

You can specify a width from 62.5 (very condensed) to 100 (normal width).

The generator formats the CSS for a class definition with your font formatting selections.

I realize I've introduced two topics in this article and I apologize if it is confusing.

1. One topic is the generator for the font Noto Sans. That was intended to be the primary topic.

2. The other topic is variable fonts. There is so much to say about variable fonts that it is merely mentioned here. The web pages at the these three links contain more information about variable fonts.

   • Variable Fonts Guide (developer.mozilla.org)
   • About Variable Fonts (variablefonts.io)
   • Introducting Variable Fonts (fonts.google.com)

To close the article, let me reiterate that the generator at the tools page can be used for creating classes to use font Noto Sans on your website. It can also be useful for becoming acquainted with variable fonts.

(This content first appeared in Possibilities newsletter.)

Methods GET and POST both refer to how the browser sends information to the destination web page (or software).

The URL in the browser's address bar is the destination. (There may be redirects or other operations that occur and change the destination, but those are out of the scope of this article.)

Links that are clicked to go to a web page are method GET. When information is sent to the web page being linked to, it can be sent as part of the URL. The information is appended to the URL with a "?" character.

Here is a URL with information appended to the URL.

http://example.com/page.php?name=will&state=awake

In the above illustration, "name=will&state=awake" is the information appended to the URL. That is method GET.

When the browser reaches the server with method GET, the information is recorded in the server logs.

Forms usually employ method POST to send the form information with the browser as it travels to the receiving web page or software.

Here is an example form that can be copied to submit method POST. If this were a working form then when the button was tapped the form information would travel to http://example.com/page.php as method POST. (The example form is followed by the source code for the form.)

<form metod="post" action="http://example.com/page.php">
Name: <input style="width:200px;">
<br><input type="button" style="width:calc(200px + 4.7em);" value="Submit" onclick="alert('Example form, not for use.'); return false;">
</form>

Method POST information cannot be seen by the person using the browser. It travels with the browser behind the scenes, so to speak.

No illustration can be provided for you because the POST information is not visible.

When the browser reaches the server with method POST, the information is not recorded in the server logs.

Another difference between the two is that the amount of information generally is limited to a kilobyte with method GET and several or many megabytes with method POST. The limit for both methods is determined by the server at the browser's destination.