Web Dev Notes

Blog about web development by Robert Dawson

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()

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'));
});

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. 

How to make HTML elements the same height

See how the "Read more." links at the bottom are horizontally aligned on this page?

Below is how I did it. Note that the elements variable is an array to let you equalize differently identified elements (e.g., [".div1", ".div2"]).

function setSameHeight(elements) 
{
var heights = new Array();
for (e = 0; e < elements.length; e++)
{
heights[e] = $(elements[e]).height();
}
var tallest = Math.max.apply(Math, heights);
for (e = 0; e < elements.length; e++)
{
$(elements[e]).height(tallest);
}
}

var elements = [".sqs-block.summary-block"];
setSameHeight(elements);

CSS and jQuery tricks!

So, this morning, I ran across two unrelated web-dev problems, Q1) how to prevent that annoying blue highlight box from appearing when clicking on image map areas and Q2) how to close a modal window (i.e., hide a div) with the Escape key, since the latter feels like a common interaction pattern online today.

Q1: How do you prevent  that annoying blue highlight box from appearing when clicking on image map areas?

A1: Do this: 

area {
outline: none;
}

Q2: How do you close a modal window (i.e., hide a div) with the Escape key, since the latter feels like a common interaction pattern online today?

A2: Do this: 

$(document).on('keydown', function(e)
{
if (e.keyCode === 27) // ESC
{
$('.modal_window').hide();
}
});

HTML5 tag name validator

This form validates if a user's text string matches that of a valid HTML5 tag name.

Here is the regex:

/^(!(--|DOCTYPE)|a(bbr|ddress|r(ea|ticle)|side|udio)*|b(ase|d(i|o)|lockquote|ody|r|utton)*|c(a(nvas|ption)|ite|o(de|l(group)*|mmand))*|d(atalist|d|e(l|tails)|fn|iv|l|t)*|em(bed)*|f(i(eldset|g(caption|ure))|o(oter|rm)|rame(set)*)|h(ead(er)*|[1-6]|group|r|tml)|i(frame|mg|n(s|put))*|k(bd|eygen)|l(abel|egend|i(nk)*)|m(a(p|rk)|e(nu|t(a|er)))|n(av|oscript)|o(bject|l|pt(group|ion)|utput)|p(aram|r(e|ogress))*|q{1}|r(p|t|uby)|s(amp|cript|e(ction|lect)|mall|ource|pan|t(rong|yle)|u(b|mmary|p))*|t(able|body|d|extarea|foot|h(ead)*|i(me|tle)|r(ack)*)|u(l)*|v(ar|ideo)|wbr)$/i

 

Bookmarklet to switch subdomains

If you ever find yourself needing to switch subdomains, such as from beta.mysite.com to www.mysite.com, here is a bookmarklet to make life easier. Because dragging my mouse to the address bar, selecting the entire subdomain, and then tediously typing in a new one is so exhausting!

With this handy bookmarklet, all you have to do is click it and type in the subdomain you want. It's not telepathy, but it's tolerable. To make this bookmarklet, make a new bookmark on any given page and then replace the URL with the following code.

javascript:var env=prompt("Subdomain?","e.g., www");if(env!="e.g., www"){window.location=window.location.href.replace(/http:\/\/(.+?)\.(.+?)\.(.+)/g, "http://"+env+".$2.$3");};

Set Messages Status to Available on Startup

Maybe it's my overbearing electromagnetic influence, but I routinely encounter a problem with the Mac app, Messages, in that, if it doesn't detect an Internet connection, it changes its status to "Offline" and, because I shutdown and opt to restart with the same applications open, the status of Messages remains "Offline" when it opens, even when I try to change it to "Available." Um.

So, to solve this simple but annoying bug for Apple, download the following AppleScript script bundle and add it to your login items so it runs on startup.

Set Messages Status to Available on Startup

Instructions

  1. Download to /Documents/scripts/Applescript/.
  2. Uncompress (from .zip to .scptd).
  3. Go to System Preferences > Users & Groups > Login Items (tab).
  4. Select the + sign.
  5. Find your script.

If you don't feel like downloading the script bundle above, just open the AppleScript Editor application, start a new script, and paste in the following code:

if application "Messages" is not running then
launch application "Messages"
end if

tell application "Messages"
set status to available
end tell