What is default text (font) size on Chrome?

Self-tutoring about the Chrome browser: the tutor measures its default font size in pixels.

I opened the Chrome settings and found its font set to “medium”.

I then made a quick page with two divs: one set at 20em, then the other at the pixel width so it matches the first. The matching pixel width turns out to be 320px. Importantly, I didn’t define font size anywhere on the page. Doing so can prejudice the results.

An em, typically is “one character.” Therefore, if 20em=320px, then 1em=16px. On this browser, anyway, the default font size is 16px.

Interesting, eh?

Source:

j.eremy.net

mozilla.org

Jack of Oracle Tutoring by Jack and Diane, Campbell River, BC.

Web browsers: Chrome: the “reopen tab” key combination

Self-tutoring: I often close tabs by mistake. The tutor mentions a solution when it happens.

On Chrome, in Windows, it’s my experience that Ctrl+Shift+t will reopen the last tab you closed, and that it will reopen where it last was.

The trick also seems to work with ie:)

Source:

productforums.google.com

Jack of Oracle Tutoring by Jack and Diane, Campbell River, BC.

Microsoft web browser: how to tell which you’re using

Computer self-tutoring: the tutor mentions how to check which Microsoft browser you’re using.

In my experience, here is how to reveal the About info:

The three dots at top right, just under the x, hold a menu, under which, at the bottom, is Settings.

Opening the Settings option, a heading called About this app is near the bottom. There is described the browser: this one reports Microsoft Edge.

Jack of Oracle Tutoring by Jack and Diane, Campbell River, BC.

Home computer use: shortcut key combinations: refreshing the page in the browser, Windows

More self-tutoring: the tutor mentions a shortcut to refresh the page in a browser.

Ctrl+F5

is meant to refresh the page in the browser. As I understand, the reload is from the server rather than from the cache.

Source:

www.getfilecloud.com

support.mozilla.org

Jack of Oracle Tutoring by Jack and Diane, Campbell River, BC.

Web browsers, home computer use: setting the cursor in the search bar w/o using the mouse

Self-tutoring about home computer use: the tutor shares a keyboard shortcut to the search bar.

Ctrl+L
is meant to return the cursor to the search bar.

Source:

w3schools.com

lifehacker.com

Jack of Oracle Tutoring by Jack and Diane, Campbell River, BC.

Home computer use: security: Bitdefender Safepay

Using a PC can involve constant self-tutoring. The tutor shares his discovery of Bitdefender Safepay.

As I’ve come to understand, Bitdefender Safepay is a secure browser that can be invoked from the Bitdefender suite (I have, I believe, Bitdefender Total Security). The idea is that you can browse with Safepay (as opposed to your regular browser) for extra security.

While Bitdefender Safepay might mainly play to people doing transactions online, it can be used as a general-purpose browser. For sites you log into, like blogs or membership sites, (as well as, of course, transaction situations), it offers a virtual keyboard through which you can enter the credentials. Using the virtual keyboard protects against keyboard-monitoring malware.

I like Safepay as just a regular browser; I don’t do much in the way of transactions, but I do log into blogs, membership sites, etc.

HTH:)

Source:

pcworld.com

Jack of Oracle Tutoring by Jack and Diane, Campbell River, BC.

Chrome: Developer tools (view page source): ==$0

The tutor talks about ==$zer0 in Chrome’s Developer tools.

Looking at a page source in Google Chrome, I saw the entry ==$0. It wasn’t manifesting on the page itself; I wondered if it was a type of HTML comment.

Apparently, ==$0 shows the element you’ve selected to inspect. Chrome itself prints it in the page source to help you find the line that produces the element you’ve chosen. It’s not content.

Source:

stackoverflow.com

Jack of Oracle Tutoring by Jack and Diane, Campbell River, BC.

Web design: jQuery css() and JavaScript style: boundary testing

The tutor discusses what he noticed while experimenting with jQuery css() and JavaScript style.

JavaScript has a style function that allows you to access style attributes of an element. For example, to get an element’s color:

var e1_color=document.getElementById(“e1”).style.color;

However, as I understand, you’re not meant to harvest the entire style at once:

var e1_style=document.getElementById(“e1”).style; //not intended

Furthermore, let’s imagine you do so anyway, then try to convey that style to another element:

var e1_style=document.getElementById(“e1”).style;
document.getElementById(“e2”).style=e1_style;
//won’t work, according to my tests

Curiously, though, I’ve found that

var e1_style=document.getElementById(“e1”).style;
jQuery(“#e2”).css(e1_style);

does work on Chrome and Firefox (but not ie11).

It’s not a recommended way to change the style of an element, but it hints at how JavaScript and jQuery can have deeper communication than JavaScript with itself. It also reminds of the potential differences from browser to browser.

I’ll be talking more about JavaScript and jQuery in future posts:)

Source:

w3schools

Pollock, John. jQuery: A Beginner’s Guide. Toronto: McGraw-Hill, 2014.

Jack of Oracle Tutoring by Jack and Diane, Campbell River, BC.

JavaScript: output to the console

The tutor tests JavaScript code using the console.

I’ve long known about the JavaScript console, and use it sometimes for debugging. However, I didn’t know to use if for testing – until now.

In the past, I’d build a rudimentary web page around a JavaScript function, sending the output to a div using innerHTML. However, for checking continuity and logic, sending output to the console might be simpler. Testing it today, I’d just open Notepad, type

<script>

lines
of
code
to be
tested

console.log(Output you want to see);

</script>

then save the file as html and point the browser to it. Of course, at first, I’d just get a blank screen. F12 opens the developer tools, then clicking Console shows the output.

In the JavaScript code, the command

console.log(Output you want to see);

sends the output to the console. If for some reason there’s a problem, you know right away: that’s what the console is there to tell you. Therefore, it’s a great testing utility.

HTH:)

Source:

w3schools

Jack of Oracle Tutoring by Jack and Diane, Campbell River, BC.

Web design: @keyframes

The tutor shows a trick available from CSS.

@keyframes animation effect from CSS.

The @keyframes effect may not be visible in some earlier browser versions – like, possibly, ie9 or before. However, someone running XP, for example, can get Opera (which is what I have on my XP computer), then can hopefully view the effect.

Source:

w3schools

Jack of Oracle Tutoring by Jack and Diane, Campbell River, BC.