Web Dev Notes

Blog about web development by Robert Dawson

My path to JavaScript mastery

"Mastery" is probably a little exaggerated. This is more my path beyond jQuery.

Ebooks

Web

Command Line

Make a baby with JavaScript!

This JavaScript code makes a baby that eats and poops right in your browser's console!

// make a baby constructor
var Baby = function(name){
    this.name = name;
}
// let the baby eat
Baby.prototype.eat = function(){
    console.log("Nom, nom, nom...");
};
// let the baby poop
Baby.prototype.poop = function(){
    console.log("Wah, wah, wah...");
};
// make a baby
var myBaby = new Baby();
// name the baby
myBaby.name = "Kal-El";
// say the baby's name
console.log(myBaby.name);
// feed the baby
myBaby.eat();
// watch the baby poop
myBaby.poop();

// TODO: Write birdsAndBees()
// TODO: Write payForCollege()
// TODO: Write getAJob()

Generate an image in Terminal

If you ever find yourself needing to generate a placeholder image and can't be bothered going to a site like http://placehold.it, typing in a URL, and saving the resulting image, you can simply open Terminal and type this command:

curl -O http://placehold.it/350x150

Although, this might be more appropriate:

curl -O https://placekitten.com/g/200/300

Save to file all links on page

This code below works in Chrome's console (on Mac, but should work on Windows), assuming that jQuery is loaded on the page. Run this script, then right-click and save. I also renamed the resulting file with a .txt extension to see a preview in Finder.

jQuery('*').find('a').each(function(){
  console.log(jQuery(this).attr('href'));
});

How to fix a Day One tag name

  1. Open Day One.
  2. Go to Preferences > Sync.
  3. Click the folder icon in the "Data File" section. My folder is called "Journal_dayone."
  4. A Finder window will open. Keep it open and close Day One.
  5. Drag the "entries" folder to Sublime or another text editor with folder support.
  6. Find and replace. Make sure it's case-sensitive if necessary.
  7. Open Day One to check.

You're welcome!

Is there an optimal typography equation?

The Internet of Things is kind of exploding and designing web pages by form factor seems increasingly untenable. As a start, could there be an elegant equation, like e=mc^2 (but prescriptive), for optimal typography?

Suppose there could be. What variables should be included?

  • Ground (i.e., display)
    • Width
    • Height
  • Font
    • Face (e.g., Arial, Georgia)
    • Size
    • Leading (i.e., line height)
    • Tracking (i.e., character spacing)
    • Style (e.g., serif, san-serif)
    • Color
  • Characters per line

I don't immediately see an intuitive calculation approach. Should the end result be a set of ratios?

To get us started, we already have a ton of information! For instance, Smashing Magazine conducted a popular 2009 study on typographic design patterns across 50 popular websites and recently revisited their findings. Here is a summary of what they found as of late 2013:

Popular Serif And Sans-Serif Fonts

  • Serif and sans-serif are almost equally popular in headlines, while serifs have strongly gained (two-thirds use them) in popularity in body copy.
  • Surprisingly, 39% of body copy and 66% of headlines use non-standard "Web-safe" fonts.
  • Most popular serif for headings and body copy: Georgia
  • Most popular sans-serif for headings and body copy: Arial
  • Verdana and Lucida Grande are losing popularity.

Light Or Dark Background?

  • Not much change since 2009 as black text on a white background continues to prevail.

Average Font Size For Headlines

  • Heading sizes have increased with a current average of 38px.

Average Font Size For Body Copy

  • Body copy is larger today with 16px being the most common size, followed closely by 14px.

Ratio Of Headline to Body Font Size

  • Updated suggestion: HEADLINE ÷ BODY COPY = 2.5

Optimal Line Height For Body Copy

  • line height (pixels) ÷ body copy font size (pixels) = 1.46
  • line length (pixels) ÷ line height (pixels) = 24.9
  • space between paragraphs (pixels) ÷ line height (pixels) = 1.39

Characters Per Line

  • 83.9 characters per line at 1100px display width

Web Typography And Responsive Design

  • Surprisingly, 42% of analyzed websites incorporate responsive design.
  • 500px wide display width averages:
    • Line height: 28px
    • Body font size: 15px
    • Characters per line: 77
  • 700px wide (140%) display width averages:
    • Headline font size: 36px
    • Body font size: 15.6px (104%)
    • Characters per line: 82.7 (107%)
  • 950px wide (136%) display width averages:
    • Headline font size: 37.9px (105%)
    • Body font size: 16.1px (103%)
    • Characters per line: 84.8 (103%)
  • 1600px wide (168%) display width averages:
    • Headline font size: 40.7px (107%)
    • Body font size: 16.2px (101%)
    • Characters per line: 86.8 (102%)

Performance Considerations

  • Average of 5.7 font files at 133.5 KB

Other Findings

  • 45% underline links. The rest do on hover or not at all.
  • 71% highlight links with color. The rest do on hover or not at all.
  • 99% left-align text.
  • No website uses hyphenation.
  • 84% use the same fonts for print and screen CSS.
  • Home pages average 1.346 MB load time. Article pages average 1.146 MB.
  • Average number of HTTP requests is 119!

Facebook isn't real

This NY Times article offers one writer's thoughts on the declining relevance of Facebook, especially among teens. I rarely check Facebook and only in the hope of seeing an interesting update from family and friends. For example, Facebook is great for learning about school graduations and other important life events.

But the more common kinds of content I find include:

  • Amusing photos and links
  • Event photos
  • Opinions

Occasionally, someone posts a link to a professionally written news article, but that seems rare. Though, I also haven't caught any of my connections posting trivial drivel like about the color of their poop. That would be too overt as Facebook is clearly bathroom reading.

Each of the posts I read on Facebook contains useful information, especially in the aggregate, if only I took the time to pan for gold. It's not that I'm jaded by what I run across on Facebook as much as I'm busy living life. And I think that's the problem, for me at least. Facebook isn't real.

A few advantages and/or disadvantages of PHP

 The biggest strength of PHP for me has always been that it's free, in contrast to a language like .NET. For example, I used ColdFusion and ActionScript both for years, but only because someone else, namely, my boss at the time, paid for the necessary software to use them!

Another strength of PHP for me has been its relative ease of use and learning curve. For example, for better or worse, I have rarely felt the need to write classes, whereas I have with a language like Java or Apple's dark underbelly, Objective-C.

Maybe I should blame my art background, but I have generally enjoyed the simplicity of loosely typed languages. At the 2013 SF HTML5 Developer Conference, for instance, I found myself nodding in agreement when Douglas Crockford reaffirmed his overall praise of JavaScript's loose typing, even at the expense of having a single "number" type.

However, I also found myself scratching my head a bit because I kept wondering if it might be better to better organize a loosely typed language like JavaScript, since, at least in JavaScript's case, it's not so good at counting. And I find that, as I continue to write code, whether PHP or CSS, I tend to want more structure, especially if it promises reusability.

So, I suppose I see PHP's loosely typed structure as both a strength and a weakness, for more speed and less stress, respectively.

One last weakness of PHP that I should mention, keeping in mind that this might simply reflect my ignorance of available options, is the ease of generating documentation for PHP code. I have used phpDocumentor, for example, but also found annoying problems, like when each of the generated HTML pages starts with an error about not specifying a default timezone. Is this really that hard to eliminate this error?

Here are some relevant discussions I found today:

What are some of the advantages of PHP over other programming languages?

What are the horrors of PHP?

Strengths and Weaknesses of various programming languages

But, however good or bad, by whatever measure, PHP seems to a given developer these days, it does remain a popular choice.