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.
Author: Abdullah Yahya
Bulk HTTP Header Response Checker
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.
Javascript Countdown Timer
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);
});
Improve Internet Download Speeds (AT&T U-Verse)
I have had AT&T U-Verse internet for some time now and my current plan is supposed to allow me to achieve download speeds of up to 24 Mbps. However, when I’d test my speed using SpeedTest, my speed would fluctuated and sometimes be as low as 9 Mbps. I was testing over wi-fi which wouldn’t give you the same speeds as over ethernet cable but still, 9 mbps was a lot less than 24. An AT&T technician came to replace the power supply brick for my modem. I asked him to check my speeds and to fix them to achieve the correct speeds. He had a special device that allowed him to see how many wi-fi networks my laptop was picking up as well as what channel they were one. To improve performance, he suggested we change my modem’s wi-fi channel to one that wasn’t currently being used by neighboring networks, I guess to minimize or eliminate collisions. By logging into your modem from a browser, you can see your current channel and be able to switch to another channel.
I was on channel 11, which no one else was on, but we changed it to channel 3, which no one else was on either, and retested the speed. The speed was better but still not great and although we were sitting right next to the modem, we weren’t getting a strong signal. We then tried channel 5, as shown above, and retested the speed. Now, I’m getting always 21+mbps down, as you can see below.
Conclusion: if you’re not getting the speeds you’re paying for, try changing your wi-fi access point’s channel. There are 11 channels in total. If you don’t know what channels your neighbors are on, you can try changing the channel from 1 to 11 and testing the speed at each channel until you find a speed that is close to what you’re paying. You can also install NetStumbler to see what networks are available and what channels they are on. Even though your access point should auto-select a free channel, that channel may still not give you the speeds you expect. Also, test you connection speeds using a direct ethernet connection as this is what AT&T uses to determine connection speed.
Regular Expressions: Greedy vs Lazy Specifiers
Let’s say you want to match all href values in <a> tags in an HTML document. You might do something like
href=”.*”>
But that doesn’t work because the * is greedy and gets everything up until that last closing bracket on the first line. To fix this, make the * lazy but adding a question mark (?) after it.
href=”.*?”>
Notice now that we correctly get 3 matches instead of 2.
Fix CSV Files & Import/Export Them Using MySQL & Excel
Recently I had to do my taxes and having an online store, I had to go through 9000 transactions in Paypal that I needed categorize. Paypal lets you download your transaction history as a csv (comma-delimited text) file with double quotes (“) as a text qualifier which is a standard format. Unfortunately, you can still run into problems if you have double quotes and commas in a field’s value as follows:
“Confirmed”,”8″”, 10″”, 12″” AR550 Gong Round Steel Shooting Target Set 1/2″” Thick ( AR500)”,”300977807743″,”0.00″,”0.00″,”0.00″,””,””,””,””,”Ebay”, ….
Notice that the 2nd field contains double quotes and commas as follows:
8″”, 10″”, 12″” AR550 Gong Round Steel Shooting Target Set 1/2″” Thick ( AR500)
The original text for this field is
8″, 10″, 12″ AR550 Gong Round Steel Shooting Target Set 1/2″ Thick ( AR500)
where the double quotes represent inches as a unit of measure and the comma indicates that there are multiple sizes (8 inch, 10 inch, and 12 inch). The double quotes were escaped with double quotes to indicated that the double quotes are part of the field’s value. However, a double quote followed by a comma messes everything up because there’s no way to know whether that comma is part of the field value or a field delimiter.
The fact that this field contains double quotes and commas breaks the csv format because it appears now that this row has more columns that those in other rows. This is one of many things that can break a csv file. To fix this and other issues, I have found that it is most easy to use a tool called CSV Easy. It’s fast and shows you clearly which rows need to be fixed. Here’s an example of the problem I faced earlier.
Continue reading Fix CSV Files & Import/Export Them Using MySQL & Excel
A Better Calculator for Windows
If you need a calculator that shows many calculations so that you don’t have to write down and remember what previous calculations were, you can use CalcTape. I have found it to be most useful.
Healthy, Tasty, High Protein Meal Replacement Smoothie for Weight Loss
When it comes to losing weight, the formula is quite simple. The amount of calories your body burns each day must be greater than the amount of calories you consume each day.
Calories Burned – Calories Consumed > 0
Calories are burned as you go about your day to day and if you exercise (primarily cardiovascular).
Calories are consumed when you eat.
You have three options for satisfying the above formula:
- Eat as you normally do but exercise A LOT so as to burn more calories than you consume
- Don’t exercise at all but eat very little or very low fat / low calorie foods
- Do a combination of the above
Continue reading Healthy, Tasty, High Protein Meal Replacement Smoothie for Weight Loss
Document Ready VS Load Events
$(document).on(‘ready’, handler)
// executes when HTML-Document is loaded and DOM is ready. Assets like images maybe still are missing. The DOMContentLoaded event is fired.
$(window).on(“load”,handler)
// executes when complete page is fully loaded, including all frames, objects and images;
You can see what assets are loaded before and after a document is ready by viewing the Network panel in Chrome’s inspector. The Load event is fired.
The blue line indicates when the document is ready and the red line when the window (page / document) has loaded.
At the bottom, you can see how long it took for the document to be ready (614 ms) and how long for the window to load (3.81 s).
Photoshop: Content-Aware Fill to Fill Areas with Neighboring Pixels
Every now and then, you may come across an image with a spot or two that doesn’t look right. Consider the image below.
It has a red square in the middle of a textured background. While you can clone neighboring pixels and paste them over the red square, an easier way is to use Photoshop’s Content-Aware Fill option. Just select the area (red square, in this case) and then do Edit > Fill as follows:
Continue reading Photoshop: Content-Aware Fill to Fill Areas with Neighboring Pixels