Abdullah Yahya

When trying to track down where some Javascript code is getting executed, it’s useful to see a function call stack. While many browser inspectors can give you this information, I have found Safari’s inspector to be the easiest to use for this particular purpose. In the screenshot below, you’ll see that I set a breakpoint on line 8 where the “write” function is defined. When you load your page, you’ll see a call stack box on the left in the Safari inspector showing all of the functions that were called before the “write” function was called. Clicking on each function shows you the section of code in its respective file. In this case, an anonymous function in the “search” file (search.html) on line 259 called another anonymous function in the “search” file on line 261 which then called another anonymous function in the jsapi file (jsapi.js) on line 93 which called another anonymous function in the jsapi file on line 244 which called function “d” in jsapi on line 143 which then finally called the “write” function in main.js on line 8 where I set the breakpoint.

When developing websites, you often need to browse to a bunch of  URLs to check each page visually. Since I got tired of copying and pasting URLs from a text editor to my browser for each URL, I created a simple tool to convert a newline-delimited list of URLs to hyperlinks that opens each link in a new tab. After clicking on a link, its background turns yellow so you can keep track of where you left off. You can use the tool at

http://www.woodfishart.com/abdullahyahya/multiple-url-browser.html

When developing websites, you sometimes run into pages that are very long. You may have your CSS at the top of the page and your HTML below. The SublimeText editor has a neat feature that let’s you view and edit a single file in multiple views so you can view and edit one part of your file in one window and another part of the same file in another window. To do this, open a file and then click File > New View into File.  I then like to drop my 2nd view of the file into a new pane like below. If you edit the file in one view / pane, that change will also be applied in the 2nd view because you’re essentially editing the same file even though it may look like 2 separate files.

If you’re looking for a fast, user-friendly tool to check broken links on a page you’re currently viewing, the Check My Links Google Chrome extension is pretty nice. Links that are good are highlighted in green and ones that are bad are highlighted in red.

While most people don’t feel the need nor want to print websites anymore, some people still print them. Developing a website to see how it looks when printed can be a hassle. You can keep printing your pages on paper until you get things to look right or you can keep previewing how it would look in your browser’s print dialog window. You can also temporarily change the CSS media of your print CSS to “screen” while you develop. Fortunately, if you use Google Chrome, there’s an ever easier way as pointed out by my colleague, Keith Shaw, the other day. If you open a page in Chrome and Chrome’s Inspector, you can hit the escape button to toggle additional controls as shown in the screenshot below. With the control panel open, click “Emulation”, “Screen”, and check the “CSS Media” checkbox with the media selection set to “print”. You can then view how your pages will look when printed right in your browser and easier adjust CSS styles instantly.

When developing websites, I often find myself needing to measure the length of elements and aligning elements. One very useful tool for doing is is a screen ruler. The best one I’ve found is called “A ruler for Windows.”  It has many features including the ability to make the ruler horizontal and vertical. Below is a screenshot of how it looks on this website.

Converting a website design in Photoshop to an actual website with pixel perfect accuracy can be quite challenging. One thing you can do to simplify this process is by overlaying a semi-transparent browser over your Photoshop design and then using a development tool like Chrome’s Inspector or Firebug to adjust page elements until that match the underlying design. To do this in Windows 7, you’ll need to enable an Aero theme which is in the Personalization Control Panel item.

  Continue reading Overlap a Semi-Transparent Web Browser Over a Photoshop PSD Design for Precise Web Development

Every now and then I’d upload a bunch of docs and would like to quickly check verify that they are all live and that I don’t get any 404s (file not found errors). One nice tool for checking this is httpstatus.io. Just copy and paste a bunch of URLs (up to 100) into the text area and submit and you’ll get a response for all URLs quickly and easily.

If you want to create a countdown timer for your website, you can do so with Javascript. But, there are some things you need to look out for concerning dates. Below is a code snippet for creating a Javascsript countdown timer.

$(document).ready(function() {
// set the date we're counting down to
// if the target date should be local to a user's time zone, e.g. the next new year,
// then just enter the date, e.g. "Jan 1, 2015 00:00:00"
// if the target date should be fixed to one time zone,
// e.g. for a live, online event that will take place at the same time regardless of a user's time zone,
// then enter the date in universal format, e.g. Apr 24, 2014 10:00:00 GMT-0700
// this example is for a target date that is on April 24, 2014 at 10 AM Pacific time (USA)
var target_date = new Date("Apr 24, 2014 10:00:00 GMT-0700").getTime();

// variables for time units
var days, hours, minutes, seconds;

// get tag element
var countdown = document.getElementById("countdown");

// update the tag with id "countdown" every 1 second
var timerId = setInterval(function () {
// find the amount of "seconds" between now and target
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;

// do some time calculations
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;

hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;

minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);

// insert the time
$days.text(days);
$hours.text(hours);
$minutes.text(minutes);
$seconds.text(seconds);
}, 1000);
});

Continue reading Javascript Countdown Timer