javascript

All posts tagged javascript

I am pretty sure that Open Sans by Steve Matteson is my favourite font for reading on a screen. Lately, I have found myself opening the browser’s developer tools and messing with the font-face when I want to read anything non-trivial that uses a font I dislike, but turning on Open Sans is less trivial since it is often not available as a browser default.

I could just settle for a default sans serif font, but that makes my eyes sad. I want my eyes to be tiny smiles when I read, so I wrote some code to fix it:

First I made a script that I can paste into the console:

var lnk = document.createElement('link')
lnk.setAttribute('href', '//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800')
lnk.setAttribute('rel', 'stylesheet')
lnk.setAttribute('type', 'text/css')
document.head.appendChild(lnk)
document.body.style.fontFamily = 'Open Sans'

Finding the script and manually pasting it is not ideal though, so I turned it into a bookmarklet:

javascript:(function(){var lnk = document.createElement('link');lnk.setAttribute('href', '//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800');lnk.setAttribute('rel', 'stylesheet');lnk.setAttribute('type', 'text/css');document.head.appendChild(lnk);document.body.style.fontFamily = 'Open Sans'})()

That is much better, except I don’t tend to keep my bookmarks visible on normal pages (just on my new tab page). I looked around and found this little tool: Convert bookmarklet to Chrome extension by Peter Legierski which let me get an icon next to my omni bar. That did the trick. Peter writes about the conversion tool in his blog How to Convert Bookmarklet to Chrome Extension.

Now I can switch to Open Sans with a single click. Thanks Peter 🙂

Codeacademy

  • Getting Started with Programming: 79%

Additional references:

  • Window.confirmWindow.confirm(message) shows a modal dialog with the message and OK and Cancel buttons. Returns a boolean depending what the user clicks.
  • Window.promptWindow.prompt(message, [default]) shows a prompt with the message that takes text input, with default text in the text box.
  • String

Console.log

Console.log | MDN

The simplest form of console.log takes a single object or string, but it can do a lot more:

  • If given more than 1 object, it will convert them all to strings, concatenate the strings, and print the result.
  • If given a string with substitution strings, it will replace the substitutions with the subsequent arguments.

Details about substitution strings are at Console: Outputting text to the console. It notes the following substitutions:

  • %o – hyperlink to JS object, clicking opens inspector
  • %d or %i – display an integer
  • %s – display a string
  • %f – display floating point value
  • %c – apply CSS styles. The string argument is treated as a set of CSS properties to apply. I found that specifying an empty string for a subsequent %c argument can reset the style to the default.

String.prototype.substring/slice

substring() has some undesirable behaviour, so it is far more common to see slice() used in practice. Basically, substring() does odd things when you give it negative numbers and in a few other cases. There is a nice overview in an answer to “What is the difference between String.slice and String.substring?” on StackOverflow.