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

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!

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

To disallow comments in WordPress

Here is how to disallow comments in WordPress. Please note that this applies to version WordPress 3.6. 

To disallow comments for new posts:

  1. In the admin, go to the Discussion section under Settings on the left.
  2. Uncheck the "Allow people to post comments on new articles" option.

To disallow comments for existing posts:

  1. Go to the Posts section.
  2. Check the checkbox to the left of the Title column to select all posts.
  3. Click the Bulk Actions menu above this checkbox.
  4. Select the Edit option and click Apply.
  5. Select the "Do not allow" option in the Comments drop-down menu.

 

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

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

Hide/show info and change URL without reloading

Problem

You have a page with information by year. And year headings are linked, like this:


Information under the latest year is shown, while information under previous years is hidden. When a user clicks a year, you want to show that year's information and add a hash value (e.g., #2013) to the URL so that returning to this page will return it to the previous open/close state.

Solution

var current_path = location.pathname;
var year_hash = (location.hash.substr(1) != "") ? location.hash.substr(1) : "";

$("h2").on("click", function()
{
location.hash = $(this).text();
});

if ( location.hash.match(/^\#\d{4}$/) )
{
$("h2:first").click();
$("h2:contains(" + year_hash + ")").click();
}

Automator script to copy all open URLs in Safari to clipboard

Problem

You need to send someone (or do anything with) a list of URLs you have open (in Safari or Chrome on Mac).

Solution

Use this Automator workflow script:

on run {input, parameters}
	set _urls to {}
	tell application "Safari"
		repeat with _tab in tabs of window 1
			set end of _urls to URL of _tab
		end repeat
	end tell
	set {_tid, AppleScript's text item delimiters} to {AppleScript's text item delimiters, return}
	set the clipboard to _urls as string
	set AppleScript's text item delimiters to _tid
	
	return input
end run

Then, just paste wherever you like!

Open selected text in TextMate with Automator

Like most developers with a Mac I presume, I love TextMate! One of the things I have often wanted to do is to select text in an application and paste it into TextMate. Thanks to Aaron at 9thport.net, here is a dead-simple solution!

Steps

  1. Open Automator.
  2. Make a new Service script.
  3. Add Run Shell Script.
  4. Write "cat | mate" and save as "Launch TextMate".
  5. Open System Preferences.
  6. Go to Keyboard > Services.
  7. Check Launch TextMate and give it a shortcut, like F6.
  8. Go to an application with text, select it, and hit F6!