Title Case
This happens so often that I’m actually tired of seeing it, especially coming from Americans and Brits. Apparently, many people don’t know how to title case words that are used in a title. While there are specific rules like you’re not supposed to title prepositions, articles, and conjunctions, instead remembering those are, you can just use a title case converter.
There, now you have no excuse for misspelling titles.
Recently, I came across a need to create a redirect for a URL that contained a unicode character. The url was something like
www.somedomain.com/réseau (notice the accented character)
While this would be easy to type for French people, it isn’t so for others, like Americans. To accomodate different possible spellings, a good practice is to create a redirect for 2 alternative spellings so that any one of the following URLs resolve:
www.somedomain.com/réseau
www.somedomain.com/r%C3%A9seau
www.somedomain.com/reseau
This way, percent-encoded URLs will work and people who don’t feel like finding out how to type “é” can just type “e” and that would work as well 🙂
Recently I needed to download the HTML source code from 9640 pages behind a login. At first I used PHP and cURL which normally works just find. With cURL, I first cURLed to the login page passing my login info. Then, in the same script, I cURLed to the pages I wanted to download and save to my local machine. That didn’t work so I inspected the headers and set cURL’s header options to be exactly the same. That didn’t work either and I just got a 301 Moved Permanently error. It seemed like I needed a way for the remote server to think I was no different than a regular web user browsing in a web browser. So, I tried Javascript. I logged into the website, fired up Firebug, and pasted the following code into the console tab’s command line:
[cc lang=”js”]
function wait(msecs) {
var start = new Date().getTime();
var cur = start
while(cur – start < msecs) {
cur = new Date().getTime();
}
}
Continue reading Javascript Screen Scraper / Website Downloader
Recently I had to run a link checker on a relatively large site. I used a few link checkers in the past but Xenu’s Link Sleuth is pretty fast and user-friendly.
For more information, visit
Here are some Firefox / Firebug extensions that are really useful for web developers
– Firebug
– FireShot
– YSlow
– Web Developer
– FireCookie
– senSEO
– Page Speed for Firefox
– jQuerify
Validating user-submitted form data is necessary and is often done against just ASCII (English) characters. But, as more websites are catering to an international market, many need to validate against foreign / unicode characters such as the letter é in the word extérieures. Since regular expressions are often used to compare user-submitted data against accepted patterns, these regexes need to be match against unicode characters in order to support non-ASCII characters. Here’s an example conversion from an ASCII regex to a Unicode one that also matches à through ă.
ASCII: ^([a-zA-Z0-9]+)$
UNICODE: ^([u0030-u0039u0041-u0056u0061-u007au00c0-u0103]+)$
Continue reading PHP Unicode Regular Expressions for Form Validation
With so many different screens resolutions on the market, from super wide monitors to Retina-display iPads to low-res 800×600 resolutions for people who prefer seeing everything big, most web developers will need to know how their websites look in different resolutions. One easy way to do this is using a Firefox plug-in called Web Developer. It has many features including the ability to turn on and off CSS and Javascript, will validate your page.
For more information, visit https://addons.mozilla.org/en-US/firefox/addon/web-developer/?src=ss
Many people, especially web developers, often need to capture all or part of their screen or all of a website as an image. This can be used for uploading proof of shipment when the post office loses your package, for showing people a bug or typo on a website that needs to be fixed, or anything else. Another feature that especially benefit developers is the ability to find the dimensions of any part of your screen. Google Chrome’s Developer Tools shows you the dimensions of highlighted elements. But, if you want to manually select a part of your screen and find its dimensions, a Firefox plugin called FireShot works very well. It also allows you to take screenshots and save the image to your computer or in your clipboard, among other options.
For more information, visit https://addons.mozilla.org/en-US/firefox/addon/fireshot/
Sometimes you need to store data but you don’t want to store it in a database. For example, many configuration data is stored in simple text files. Here’s one way to store data in a structured format (using an array) in a text file and have the data easily in a local variable for use.
[cc lang=”php”]
// DATA.PHP
array (
“fieldname” => “firstname”,
“rule” => “required”,
“error_msg” => “Please fill in first name”,
),
“rule2” => array (
“fieldname” => “email”,
“rule” => “required”,
“error_msg” => “”,
)
);
?>
[/cc]
[cc lang=”php”]
// INDEX.PHP
[/cc]
Put all your JS within an anonymous function using the following template
(function ($) {
'use strict';
// global variables go here
var foo, bar;
// put code that can be executed before the document is ready, e.g.
$(window).on('hashchange', function() {
foo = true;
}
$('#content').on('click', "a", function() {
foo = false;
}
// functions go here
function filterByCheckbox() {
}
function validate() {
// some code
$("input").trigger("validationPassed");
}
// put code that must/should be triggered after the document is ready
$(document).on ("ready", (function () {
// on load code goes here, e.g.
filterByCheckbox();
foo = true;
$('div.reports ul.tabs').append("abc");
// on event handlers (click, focus, submit, etc) go here, e.g.
$("select").on("change", function() {
// something
});
$("select").on("blur",validate);
$("select").on("validationPassed", function() {
// something
});
});
}(jQuery));
Put each separate code block that serves a separate purpose in a separate template above. Since Javascript is asynchronous, it can execute each code in each block / template simultaneously instead of one at a time.
Never trigger events using element.event(). Always use jQuery to handle events in a cross-browser way, e.g.
BAD
window.hashchange = function() {
}
GOOD
$(window).on('hashchange', function() {
});
For events, always use the jquery “on” and “off” functions to attach/bind and detach/unbind events. .live() is deprecated so use “on” with a subselector.
Normally, when you bind an event handler to an element, you do something like:
$("a").on('click', function (event) { ...
When binding event handlers to elements that are dynamically-generated, you’ll want to do it when the element is in the document, so use this format:
$(document).on('click', " a", function (event) { ...